@twick/visualizer 0.14.0 → 0.14.2

package/src/animations/photo-zoom.tsx

@@ -1,73 +1,73 @@
-import { Vector2 } from "@twick/core";
-import { AnimationParams } from "../helpers/types";
-
-/**
- * PhotoZoomAnimation applies a smooth zoom-in or zoom-out effect
- * on a photo element.
- *
- * Available animation modes:
- * - "in": Starts zoomed in and smoothly scales back to the original size.
- * - "out": Starts at normal size and smoothly scales up to the target zoom level.
- *
- * @param elementRef - Reference to the photo element to animate.
- * @param containerRef - Optional reference to a container element (required for this animation).
- * @param mode - Animation phase ("in" | "out").
- * @param duration - Duration of the zoom animation.
- * @param intensity - Zoom scale multiplier (default: 1.5).
- */
-export const PhotoZoomAnimation = {
-  name: "photo-zoom",
-
-  /**
-   * Generator function controlling the photo zoom animation.
-   */
-  *run({
-    elementRef,
-    containerRef,
-    mode,
-    duration,
-    intensity = 1.5,
-  }: AnimationParams) {
-    // Only run if a containerRef is provided
-    if (containerRef) {
-      // Get the element's current scale
-      const elementScale = elementRef().scale();
-
-      if (mode === "in") {
-        // Instantly set to zoomed-in scale
-        yield elementRef().scale(
-          new Vector2(
-            elementScale.x * intensity,
-            elementScale.y * intensity
-          )
-        );
-        // Smoothly scale back to original size over 'duration'
-        yield* elementRef().scale(
-          new Vector2(
-            elementScale.x,
-            elementScale.y
-          ),
-          duration
-        );
-      }
-
-      if (mode === "out") {
-        // Start at original scale
-        elementRef().scale(
-          new Vector2(
-            elementScale.x,
-            elementScale.y
-          )
-        );
-        // Smoothly scale up to zoomed-in scale over 'duration'
-        yield* elementRef().scale(
-          new Vector2(
-            elementScale.x * intensity,
-            elementScale.y * intensity
-          ),
-          duration
-        );
-      }
-    }
-  },
-};
+import { Vector2 } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * PhotoZoomAnimation applies a smooth zoom-in or zoom-out effect
+ * on a photo element.
+ *
+ * Available animation modes:
+ * - "in": Starts zoomed in and smoothly scales back to the original size.
+ * - "out": Starts at normal size and smoothly scales up to the target zoom level.
+ *
+ * @param elementRef - Reference to the photo element to animate.
+ * @param containerRef - Optional reference to a container element (required for this animation).
+ * @param mode - Animation phase ("in" | "out").
+ * @param duration - Duration of the zoom animation.
+ * @param intensity - Zoom scale multiplier (default: 1.5).
+ */
+export const PhotoZoomAnimation = {
+  name: "photo-zoom",
+
+  /**
+   * Generator function controlling the photo zoom animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    mode,
+    duration,
+    intensity = 1.5,
+  }: AnimationParams) {
+    // Only run if a containerRef is provided
+    if (containerRef) {
+      // Get the element's current scale
+      const elementScale = elementRef().scale();
+
+      if (mode === "in") {
+        // Instantly set to zoomed-in scale
+        yield elementRef().scale(
+          new Vector2(
+            elementScale.x * intensity,
+            elementScale.y * intensity
+          )
+        );
+        // Smoothly scale back to original size over 'duration'
+        yield* elementRef().scale(
+          new Vector2(
+            elementScale.x,
+            elementScale.y
+          ),
+          duration
+        );
+      }
+
+      if (mode === "out") {
+        // Start at original scale
+        elementRef().scale(
+          new Vector2(
+            elementScale.x,
+            elementScale.y
+          )
+        );
+        // Smoothly scale up to zoomed-in scale over 'duration'
+        yield* elementRef().scale(
+          new Vector2(
+            elementScale.x * intensity,
+            elementScale.y * intensity
+          ),
+          duration
+        );
+      }
+    }
+  },
+};

package/src/animations/rise.tsx

@@ -1,118 +1,118 @@
-import { all, waitFor, delay } from "@twick/core";
-import { AnimationParams } from "../helpers/types";
-
-/**
- * RiseAnimation combines vertical motion and opacity transitions
- * to create a "rising" (or "falling") appearance/disappearance effect.
- *
- * Available animation modes:
- * - "enter": Starts offset and transparent, moves into position while fading in.
- * - "exit": Waits, then moves out of position while fading out.
- * - "both": Enters, waits, and exits in a continuous sequence.
- *
- * @param elementRef - Reference to the main element to animate.
- * @param containerRef - Optional reference to a container element.
- * @param interval - Duration of movement and opacity transitions (default: 0.25).
- * @param duration - Total duration of the animation.
- * @param animate - Animation phase ("enter" | "exit" | "both").
- * @param direction - Direction to animate ("up" or "down").
- * @param intensity - Number of units to offset position vertically (default: 200).
- */
-export const RiseAnimation = {
-  name: "rise",
-
-  /**
-   * Generator function controlling the rise/fall animation.
-   */
-  *run({
-    elementRef,
-    containerRef,
-    interval = 0.25,
-    duration,
-    animate,
-    direction,
-    intensity = 200,
-  }: AnimationParams) {
-    // Use containerRef if provided, otherwise fallback to elementRef
-    const ref = containerRef ?? elementRef;
-
-    // Get the element's current position
-    const pos = ref().position();
-
-    let animationInterval = Math.min(interval, duration);
-
-    if (animate === "enter") {
-      // Start fully transparent
-      ref().opacity(0);
-
-      if (direction === "up") {
-        // Offset element below final position
-        ref().y(pos.y + intensity);
-        // Animate moving up while fading in
-        yield* all(
-          ref().opacity(1, animationInterval / 4),
-          ref().y(pos.y, animationInterval)
-        );
-      } else if (direction === "down") {
-        // Offset element above final position
-        ref().y(pos.y - intensity);
-        // Animate moving down while fading in
-        yield* all(
-          ref().opacity(1, animationInterval / 4),
-          ref().y(pos.y, animationInterval)
-        );
-      }
-    } else if (animate === "exit") {
-      // Wait until exit animation starts
-      yield* waitFor(duration - animationInterval);
-
-      if (direction === "up") {
-        // Animate moving up while fading out (opacity fades slightly after motion starts)
-        yield* all(
-          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
-          ref().y(pos.y - intensity, animationInterval)
-        );
-      } else if (direction === "down") {
-        // Animate moving down while fading out
-        yield* all(
-          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
-          ref().y(pos.y + intensity, animationInterval)
-        );
-      }
-    } else if (animate === "both") {
-      animationInterval = Math.min(interval, duration/2);
-      // Start fully transparent
-      ref().opacity(0);
-
-      if (direction === "up") {
-        // Enter animation: move up while fading in
-        ref().y(pos.y + intensity);
-        yield* all(
-          ref().opacity(1, animationInterval / 4),
-          ref().y(pos.y, animationInterval)
-        );
-        // Wait for the remaining duration
-        yield* waitFor(duration - animationInterval);
-        // Exit animation: move up further while fading out
-        yield* all(
-          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
-          ref().y(pos.y - intensity, animationInterval)
-        );
-      } else if (direction === "down") {
-        // Enter animation: move down while fading in
-        ref().y(pos.y - intensity);
-        yield* all(
-          ref().opacity(1, animationInterval / 4),
-          ref().y(pos.y, animationInterval)
-        );
-        // Wait for the remaining duration
-        yield* waitFor(duration - animationInterval);
-        // Exit animation: move down further while fading out
-        yield* all(
-          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
-          ref().y(pos.y + intensity, animationInterval)
-        );
-      }
-    }
-  },
-};
+import { all, waitFor, delay } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * RiseAnimation combines vertical motion and opacity transitions
+ * to create a "rising" (or "falling") appearance/disappearance effect.
+ *
+ * Available animation modes:
+ * - "enter": Starts offset and transparent, moves into position while fading in.
+ * - "exit": Waits, then moves out of position while fading out.
+ * - "both": Enters, waits, and exits in a continuous sequence.
+ *
+ * @param elementRef - Reference to the main element to animate.
+ * @param containerRef - Optional reference to a container element.
+ * @param interval - Duration of movement and opacity transitions (default: 0.25).
+ * @param duration - Total duration of the animation.
+ * @param animate - Animation phase ("enter" | "exit" | "both").
+ * @param direction - Direction to animate ("up" or "down").
+ * @param intensity - Number of units to offset position vertically (default: 200).
+ */
+export const RiseAnimation = {
+  name: "rise",
+
+  /**
+   * Generator function controlling the rise/fall animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    interval = 0.25,
+    duration,
+    animate,
+    direction,
+    intensity = 200,
+  }: AnimationParams) {
+    // Use containerRef if provided, otherwise fallback to elementRef
+    const ref = containerRef ?? elementRef;
+
+    // Get the element's current position
+    const pos = ref().position();
+
+    let animationInterval = Math.min(interval, duration);
+
+    if (animate === "enter") {
+      // Start fully transparent
+      ref().opacity(0);
+
+      if (direction === "up") {
+        // Offset element below final position
+        ref().y(pos.y + intensity);
+        // Animate moving up while fading in
+        yield* all(
+          ref().opacity(1, animationInterval / 4),
+          ref().y(pos.y, animationInterval)
+        );
+      } else if (direction === "down") {
+        // Offset element above final position
+        ref().y(pos.y - intensity);
+        // Animate moving down while fading in
+        yield* all(
+          ref().opacity(1, animationInterval / 4),
+          ref().y(pos.y, animationInterval)
+        );
+      }
+    } else if (animate === "exit") {
+      // Wait until exit animation starts
+      yield* waitFor(duration - animationInterval);
+
+      if (direction === "up") {
+        // Animate moving up while fading out (opacity fades slightly after motion starts)
+        yield* all(
+          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
+          ref().y(pos.y - intensity, animationInterval)
+        );
+      } else if (direction === "down") {
+        // Animate moving down while fading out
+        yield* all(
+          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
+          ref().y(pos.y + intensity, animationInterval)
+        );
+      }
+    } else if (animate === "both") {
+      animationInterval = Math.min(interval, duration/2);
+      // Start fully transparent
+      ref().opacity(0);
+
+      if (direction === "up") {
+        // Enter animation: move up while fading in
+        ref().y(pos.y + intensity);
+        yield* all(
+          ref().opacity(1, animationInterval / 4),
+          ref().y(pos.y, animationInterval)
+        );
+        // Wait for the remaining duration
+        yield* waitFor(duration - animationInterval);
+        // Exit animation: move up further while fading out
+        yield* all(
+          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
+          ref().y(pos.y - intensity, animationInterval)
+        );
+      } else if (direction === "down") {
+        // Enter animation: move down while fading in
+        ref().y(pos.y - intensity);
+        yield* all(
+          ref().opacity(1, animationInterval / 4),
+          ref().y(pos.y, animationInterval)
+        );
+        // Wait for the remaining duration
+        yield* waitFor(duration - animationInterval);
+        // Exit animation: move down further while fading out
+        yield* all(
+          delay((3 * animationInterval) / 4, ref().opacity(0, animationInterval / 4)),
+          ref().y(pos.y + intensity, animationInterval)
+        );
+      }
+    }
+  },
+};

package/src/animations/succession.tsx

@@ -1,77 +1,77 @@
-import { all, delay, Vector2, waitFor } from "@twick/core";
-import { AnimationParams } from "../helpers/types";
-
-/**
- * SuccessionAnimation combines scaling and opacity transitions
- * to create an appearing and disappearing zoom effect.
- *
- * Available animation modes:
- * - "enter": Starts scaled down and transparent, then scales up while fading in.
- * - "exit": Waits, then scales down while fading out.
- * - "both": Scales up and fades in, waits, then scales down and fades out.
- *
- * @param elementRef - Reference to the main element to animate.
- * @param containerRef - Optional reference to a container element.
- * @param interval - Duration of scaling and opacity transitions.
- * @param duration - Total duration of the animation.
- * @param animate - Animation phase ("enter" | "exit" | "both").
- */
-export const SuccessionAnimation = {
-  name: "succession",
-
-  /**
-   * Generator function controlling the succession animation.
-   */
-  *run({
-    elementRef,
-    containerRef,
-    interval,
-    duration,
-    animate,
-  }: AnimationParams) {
-    // Use containerRef if provided, otherwise fallback to elementRef
-    const ref = containerRef ?? elementRef;
-
-    // Capture the element's original scale
-    const scale = ref().scale();
-
-    let animationInterval = Math.min(interval, duration);
-    if (animate === "enter") {
-      // Start fully transparent and scaled down to 50%
-      ref().opacity(0);
-      ref().scale(new Vector2(scale.x / 2, scale.y / 2));
-      // Animate scaling up to original size and fading in
-      yield* all(
-        ref().scale(scale, animationInterval),
-        ref().opacity(1, animationInterval / 2)
-      );
-
-    } else if (animate === "exit") {
-      // Wait until exit animation should start
-      yield* waitFor(duration - animationInterval);
-      // Animate scaling down to 50% and fading out (opacity starts after half the interval)
-      yield* all(
-        ref().scale(new Vector2(scale.x / 2, scale.y / 2), animationInterval),
-        delay(animationInterval / 2, ref().opacity(0, animationInterval / 2))
-      );
-
-    } else if (animate === "both") {
-      animationInterval = Math.min(interval, duration/2);
-      // Start fully transparent and scaled down to 50%
-      ref().opacity(0);
-      ref().scale(new Vector2(scale.x / 2, scale.y / 2));
-      // Animate scaling up and fading in
-      yield* all(
-        ref().scale(scale, animationInterval),
-        ref().opacity(1, animationInterval / 2)
-      );
-      // Wait for the remaining duration
-      yield* waitFor(duration - animationInterval);
-      // Animate scaling down and fading out
-      yield* all(
-        ref().scale(new Vector2(scale.x / 2, scale.y / 2), animationInterval),
-        delay(animationInterval / 2, ref().opacity(0, animationInterval / 2))
-      );
-    }
-  },
-};
+import { all, delay, Vector2, waitFor } from "@twick/core";
+import { AnimationParams } from "../helpers/types";
+
+/**
+ * SuccessionAnimation combines scaling and opacity transitions
+ * to create an appearing and disappearing zoom effect.
+ *
+ * Available animation modes:
+ * - "enter": Starts scaled down and transparent, then scales up while fading in.
+ * - "exit": Waits, then scales down while fading out.
+ * - "both": Scales up and fades in, waits, then scales down and fades out.
+ *
+ * @param elementRef - Reference to the main element to animate.
+ * @param containerRef - Optional reference to a container element.
+ * @param interval - Duration of scaling and opacity transitions.
+ * @param duration - Total duration of the animation.
+ * @param animate - Animation phase ("enter" | "exit" | "both").
+ */
+export const SuccessionAnimation = {
+  name: "succession",
+
+  /**
+   * Generator function controlling the succession animation.
+   */
+  *run({
+    elementRef,
+    containerRef,
+    interval,
+    duration,
+    animate,
+  }: AnimationParams) {
+    // Use containerRef if provided, otherwise fallback to elementRef
+    const ref = containerRef ?? elementRef;
+
+    // Capture the element's original scale
+    const scale = ref().scale();
+
+    let animationInterval = Math.min(interval, duration);
+    if (animate === "enter") {
+      // Start fully transparent and scaled down to 50%
+      ref().opacity(0);
+      ref().scale(new Vector2(scale.x / 2, scale.y / 2));
+      // Animate scaling up to original size and fading in
+      yield* all(
+        ref().scale(scale, animationInterval),
+        ref().opacity(1, animationInterval / 2)
+      );
+
+    } else if (animate === "exit") {
+      // Wait until exit animation should start
+      yield* waitFor(duration - animationInterval);
+      // Animate scaling down to 50% and fading out (opacity starts after half the interval)
+      yield* all(
+        ref().scale(new Vector2(scale.x / 2, scale.y / 2), animationInterval),
+        delay(animationInterval / 2, ref().opacity(0, animationInterval / 2))
+      );
+
+    } else if (animate === "both") {
+      animationInterval = Math.min(interval, duration/2);
+      // Start fully transparent and scaled down to 50%
+      ref().opacity(0);
+      ref().scale(new Vector2(scale.x / 2, scale.y / 2));
+      // Animate scaling up and fading in
+      yield* all(
+        ref().scale(scale, animationInterval),
+        ref().opacity(1, animationInterval / 2)
+      );
+      // Wait for the remaining duration
+      yield* waitFor(duration - animationInterval);
+      // Animate scaling down and fading out
+      yield* all(
+        ref().scale(new Vector2(scale.x / 2, scale.y / 2), animationInterval),
+        delay(animationInterval / 2, ref().opacity(0, animationInterval / 2))
+      );
+    }
+  },
+};