@motion.page/sdk 1.2.1 → 1.2.2

package/README.md

@@ -19,7 +19,6 @@ A high-performance animation SDK with a declarative API. Scroll-triggered animat
   - [Motion()](#motion-function)
   - [Motion Static Methods](#motion-static-methods)
   - [Motion.context](#motioncontext--dynamic-content--spa)
-  - [Motion.responsive](#motionresponsive--responsive-breakpoint-variants)
   - [Motion.utils](#motionutils)
   - [Timeline](#timeline)
   - [Triggers](#triggers)
@@ -285,7 +284,6 @@ Calling `Motion()` with the same name on an already-existing timeline returns it
 | `Motion.refreshScrollTriggers` | `(): void` | Recalculate all scroll trigger start/end positions (call after layout changes). |
 | `Motion.cleanup` | `(): void` | Remove ScrollTrigger spacer and marker DOM nodes from the document. |
 | `Motion.context` | `(fn: () => void): MotionContext` | Create a scoped context that tracks all timelines created during `fn()`. Returns a `MotionContext` with `revert()`, `refresh()`, and `add(fn)` methods. Essential for dynamic content (AJAX filters, SPA navigation, infinite scroll). |
-| `Motion.responsive` | `(name, variants, breakpoints): ResponsiveManager` | Register a reactive timeline whose per-breakpoint variant is live-swapped as the viewport crosses a breakpoint — no page reload. `variants` is a sparse map of `desktop` / `laptop` / `tablet` / `phone` factories; `breakpoints` is `{ laptops, tablets, phones }` in px. Returns a manager with `getActiveTier()` and `destroy()`. |
 
 #### Examples
 
@@ -346,53 +344,6 @@ ctx.add(() => {
 });
 ```
 
-#### Motion.responsive — Responsive Breakpoint Variants
-
-Use `Motion.responsive()` to give one timeline a different animation per viewport tier. Instead of compiling a separate block per breakpoint, you register a **sparse map of variant factories** and the SDK live-swaps the active variant as the viewport crosses a breakpoint — it kills the previous tier's timeline and builds the new one, with **no page reload**.
-
-```ts
-Motion.responsive(
-  'hero',
-  {
-    // Each tier is a factory that builds AND registers its timeline.
-    desktop: () =>
-      Motion('hero', '.title', {
-        from: { opacity: 0, x: -120 },
-        duration: 1,
-      }).onPageLoad(),
-
-    phone: () =>
-      Motion('hero', '.title', {
-        from: { opacity: 0, y: 40 },
-        duration: 0.6,
-      }).onPageLoad(),
-  },
-  { laptops: 992, tablets: 768, phones: 576 } // breakpoint boundaries in px
-);
-```
-
-**Tiers & ranges.** There are four tiers — `desktop`, `laptop`, `tablet`, `phone`. The `breakpoints` object sets the boundaries, and each tier owns a width range (with the values above):
-
-| Tier | Active range |
-|------|--------------|
-| `desktop` | `≥ 993px` (above `laptops`) |
-| `laptop` | `769px – 992px` |
-| `tablet` | `577px – 768px` |
-| `phone` | `≤ 576px` (at or below `phones`) |
-
-**Sparse maps cascade up.** You only define the tiers you care about. A tier with no variant falls back to the nearest **wider** tier that does. In the example above, `laptop` and `tablet` widths both use the `desktop` variant; only `phone` width switches to the phone variant.
-
-**Return value — the manager.** `Motion.responsive()` returns a `ResponsiveManager`:
-
-```ts
-const hero = Motion.responsive('hero', { /* variants */ }, { laptops: 992, tablets: 768, phones: 576 });
-
-hero.getActiveTier(); // 'desktop' | 'laptop' | 'tablet' | 'phone' | null — the tier currently driving the page
-hero.destroy();       // remove the breakpoint listeners and kill the active variant
-```
-
-> In SSR or environments without `matchMedia`, the `desktop` variant is built once with no live swapping. If the responsive runtime is tree-shaken out of a custom bundle that has no responsive timelines, the call best-effort builds the `desktop` variant and returns `undefined`.
-
 ---
 
 ### Motion.utils

package/dist/core/Animation.d.ts

@@ -70,13 +70,13 @@ export declare class Animation {
     /**
      * Render animation at specific progress (0-1)
      */
-    render(progress: number): void;
+    render(progress: number, shouldRender?: (propTween: PropTween) => boolean): void;
     /**
      * Render animation at an absolute time position (seconds)
      * Handles repeat, repeatDelay, and yoyo for timeline-driven scrubbing.
      * When driven by a Timeline (_isActive = true), also fires lifecycle callbacks.
      */
-    renderAtTime(totalTime: number): void;
+    renderAtTime(totalTime: number, shouldRender?: (propTween: PropTween) => boolean): void;
     /**
      * Apply easing function to progress
      */

package/dist/core/PropTween.d.ts

@@ -18,6 +18,8 @@ export declare class PropTween {
     endValue: number;
     change: number;
     unit: string;
+    startUnit: string | null;
+    endUnit: string | null;
     next: PropTween | null;
     valueType: PropTweenValueType;
     startColor: Float32Array | null;
@@ -48,7 +50,7 @@ export declare class PropTween {
     /**
      * Initialize the PropTween with scalar values
      */
-    init(target: AnimationTarget, property: string, startValue: number, endValue: number, unit?: string): this;
+    init(target: AnimationTarget, property: string, startValue: number, endValue: number, unit?: string, startUnit?: string, endUnit?: string): this;
     /**
      * Initialize the PropTween with color values
      */

package/dist/core/Timeline.d.ts

@@ -34,6 +34,7 @@ export declare class Timeline {
     static setEngineActivationCallback(callback: () => void): void;
     private _name?;
     private _children;
+    private _initialRenderStartTimes;
     private _duration;
     private _time;
     private _progress;
@@ -127,6 +128,9 @@ export declare class Timeline {
      * Internal method to add an AnimationBuilder directly
      */
     private _addBuilder;
+    private _getInitialRenderStartTimes;
+    private _renderAnimationInitialBoundary;
+    private _renderInitialTimelineState;
     /**
      * Call function at position
      */
@@ -294,7 +298,8 @@ export declare class Timeline {
      */
     private _resetChildrenForCycle;
     /**
-     * Render only position-0 (non-lazy) animations at their start state
+     * Render initial start values without letting later timeline segments
+     * overwrite earlier segments for the same target/property.
      */
     private _renderPositionZeroAnimations;
     /**