fix: fix zoom transitions

Author: aarthificial

examples/smooth-parallax/src/scenes/merge.tsx

@@ -1,23 +1,20 @@
 import {makeScene2D} from '@motion-canvas/2d';
-import {Node, Rect, Circle, Txt, Img} from '@motion-canvas/2d/lib/components';
+import {Circle, Img, Node, Rect, Txt} from '@motion-canvas/2d/lib/components';
+import {
+  brightness,
+  contrast,
+  hue,
+  saturate,
+} from '@motion-canvas/2d/lib/partials';
 import {
   all,
   delay,
   loop,
   waitFor,
   waitUntil,
 } from '@motion-canvas/core/lib/flow';
-import {createRef, finishScene} from '@motion-canvas/core/lib/utils';
+import {createSignal} from '@motion-canvas/core/lib/signals';
 import {zoomOutTransition} from '@motion-canvas/core/lib/transitions';
-import {BBox, PossibleVector2, Vector2} from '@motion-canvas/core/lib/types';
-import {
-  BGColor,
-  createParallax,
-  createUpscale,
-  Parallax,
-  ParallaxProps,
-  Upscale,
-} from '../components';
 import {
   easeInExpo,
   easeInOutCubic,
@@ -28,14 +25,17 @@ import {
   TimingFunction,
   tween,
 } from '@motion-canvas/core/lib/tweening';
-import {createSignal} from '@motion-canvas/core/lib/signals';
-import {WhiteLabel} from '../styles';
+import {BBox, PossibleVector2, Vector2} from '@motion-canvas/core/lib/types';
+import {createRef, finishScene} from '@motion-canvas/core/lib/utils';
 import {
-  brightness,
-  contrast,
-  hue,
-  saturate,
-} from '@motion-canvas/2d/lib/partials';
+  BGColor,
+  createParallax,
+  createUpscale,
+  Parallax,
+  ParallaxProps,
+  Upscale,
+} from '../components';
+import {WhiteLabel} from '../styles';
 
 export default makeScene2D(function* (view) {
   view.fill('#141414');
@@ -69,7 +69,7 @@ export default makeScene2D(function* (view) {
     </>,
   );
 
-  yield* zoomOutTransition(new BBox(320, 0, 480, 270));
+  yield* zoomOutTransition(new BBox(1040, 405, 480, 270));
 
   yield* waitUntil('reconcile');
   yield* all(

examples/smooth-parallax/src/scenes/outro.tsx

@@ -1,15 +1,15 @@
 import {makeScene2D} from '@motion-canvas/2d';
 import {Img, Rect, RectProps, Txt} from '@motion-canvas/2d/lib/components';
 import {all, waitUntil} from '@motion-canvas/core/lib/flow';
-import {Container} from '../components';
-import {BlackLabel, Colors} from '../styles';
+import {zoomOutTransition} from '@motion-canvas/core/lib/transitions';
+import {BBox, Vector2} from '@motion-canvas/core/lib/types';
 import {createRef, makeRef, makeRefs} from '@motion-canvas/core/lib/utils';
-import layers from '../images/icons/layers.svg';
-import flare from '../images/icons/flare.svg';
+import {Container} from '../components';
 import desktop from '../images/icons/desktop.svg';
+import flare from '../images/icons/flare.svg';
 import functions from '../images/icons/functions.svg';
-import {BBox} from '@motion-canvas/core/lib/types';
-import {zoomOutTransition} from '@motion-canvas/core/lib/transitions';
+import layers from '../images/icons/layers.svg';
+import {BlackLabel, Colors} from '../styles';
 import videoMock from '../videos/outro.png';
 
 export default makeScene2D(function* (view) {
@@ -55,28 +55,25 @@ export default makeScene2D(function* (view) {
 
   yield view.add(
     <>
-       <Img width={'100%'} src={videoMock} />
-       <Rect ref={renderer} layout clip>
-         <Container label="PIXEL ART RENDERER">
-           <Pass name="Simulation Pass" src={functions} />
-           <Pass refs={pass} name="Parallax Pass" src={layers} />
-           <Pass name="Post Effects Pass" src={flare} />
-           <Pass name="HUD Pass" src={desktop} />
-         </Container>
-       </Rect>
+      <Img width={'100%'} src={videoMock} />
+      <Rect ref={renderer} layout clip>
+        <Container label="PIXEL ART RENDERER">
+          <Pass name="Simulation Pass" src={functions} />
+          <Pass refs={pass} name="Parallax Pass" src={layers} />
+          <Pass name="Post Effects Pass" src={flare} />
+          <Pass name="HUD Pass" src={desktop} />
+        </Container>
+      </Rect>
     </>,
   );
 
+  const bbox = BBox.fromSizeCentered(
+    new Vector2((pass.value.height() / 9) * 16, pass.value.height()),
+  );
+  bbox.position = bbox.position.add(pass.value.absolutePosition());
   yield* all(
     pass.label.opacity(0).opacity(1, 0.6),
-    zoomOutTransition(
-      new BBox(
-        pass.value.position.x(),
-        pass.value.position.y(),
-        (pass.value.height() / 9) * 16,
-        pass.value.height(),
-      ),
-    ),
+    zoomOutTransition(bbox, 0.6),
   );
 
   yield* waitUntil('hide');

examples/smooth-parallax/src/scenes/parallax.tsx

@@ -1,16 +1,18 @@
 import {makeScene2D} from '@motion-canvas/2d';
 import {
-  Node,
-  Rect,
-  Layout,
   Circle,
+  CircleProps,
   Img,
+  Layout,
   Line,
-  Txt,
   LineProps,
-  CircleProps,
+  Node,
+  Rect,
+  Txt,
 } from '@motion-canvas/2d/lib/components';
 import {all, delay, loop, waitUntil} from '@motion-canvas/core/lib/flow';
+import {zoomInTransition} from '@motion-canvas/core/lib/transitions';
+import {BBox} from '@motion-canvas/core/lib/types';
 import {
   createRef,
   finishScene,
@@ -19,11 +21,9 @@ import {
   useDuration,
   usePlayback,
 } from '@motion-canvas/core/lib/utils';
-import {zoomInTransition} from '@motion-canvas/core/lib/transitions';
-import {BBox} from '@motion-canvas/core/lib/types';
 
-import train from '../videos/train.png';
-import cameraIcon from '../images/icons/camera2.svg';
+import {createSignal} from '@motion-canvas/core/lib/signals';
+import {join} from '@motion-canvas/core/lib/threading';
 import {
   clamp,
   easeInCubic,
@@ -32,9 +32,9 @@ import {
   map,
   remap,
 } from '@motion-canvas/core/lib/tweening';
-import {createSignal} from '@motion-canvas/core/lib/signals';
+import cameraIcon from '../images/icons/camera2.svg';
 import {BlackLabel, Colors, WhiteLabel} from '../styles';
-import {join} from '@motion-canvas/core/lib/threading';
+import train from '../videos/train.png';
 
 export default makeScene2D(function* (view) {
   view.fill('#141414');
@@ -53,7 +53,7 @@ export default makeScene2D(function* (view) {
     </Rect>,
   );
   video().absolutePosition(view.absolutePosition);
-  yield* zoomInTransition(new BBox(-620, 30, 480, 270), 0.6);
+  yield* zoomInTransition(new BBox(100, 435, 480, 270), 0.6);
   yield* waitUntil('hide_video');
   yield* videoClip().position.x(-view.width(), 0.8, linear);
   videoClip().remove();