@motion.page/sdk 1.2.3 → 1.2.4

package/dist/core/Animation.d.ts

@@ -226,6 +226,13 @@ export declare class Animation {
      * @internal - Use only within sdk package for property inspection (e.g. captureStartValues).
      */
     getFirstPropTween(): PropTween | null;
+    /**
+     * Mark motion-path geometry stale on every prop tween so the geometry-dependent
+     * offsets re-resolve on the next render. Called after a layout-shifting event
+     * (window.load / resize ScrollTrigger refresh) so paths aligned to an
+     * asynchronously-sized target settle onto the correct position.
+     */
+    invalidatePathGeometry(): void;
     /**
      * Add a property tween to the linked list
      */

package/dist/core/PropTween.d.ts

@@ -10,7 +10,7 @@ import type { ParsedFilterFunction } from '../utils/FilterParser';
 import type { ParsedDrawSVG } from '../utils/DrawSVGParser';
 import type { ParsedClipPath } from '../utils/ClipPathParser';
 import { type PathPoint } from '../utils/PathParser';
-type PropTweenValueType = 'scalar' | 'color' | 'filter' | 'drawSVG' | 'path' | 'clipPath';
+type PropTweenValueType = 'scalar' | 'string' | 'color' | 'filter' | 'drawSVG' | 'path' | 'clipPath';
 export declare class PropTween {
     target: AnimationTarget | null;
     property: string;
@@ -22,6 +22,8 @@ export declare class PropTween {
     endUnit: string | null;
     next: PropTween | null;
     valueType: PropTweenValueType;
+    startString: string;
+    endString: string;
     startColor: Float32Array | null;
     endColor: Float32Array | null;
     changeColor: Float32Array;
@@ -46,11 +48,22 @@ export declare class PropTween {
         y: number;
     } | null;
     pathLUT: PathPoint[] | null;
+    pathAlignTarget: string | Element | null;
+    pathAlignAt: [number, number] | null;
+    pathTarget: string | Element | null;
+    pathScaleX: number;
+    pathScaleY: number;
     private _isElement;
+    private _pathGeomResolved;
     /**
      * Initialize the PropTween with scalar values
      */
     init(target: AnimationTarget, property: string, startValue: number, endValue: number, unit?: string, startUnit?: string, endUnit?: string): this;
+    /**
+     * Initialize the PropTween with a compound CSS string value
+     * (transform-origin, background-position, …).
+     */
+    initString(target: AnimationTarget, property: string, startString: string, endString: string): this;
     /**
      * Initialize the PropTween with color values
      */
@@ -80,7 +93,33 @@ export declare class PropTween {
     }, pathScale?: {
         x: number;
         y: number;
-    }): this;
+    }, alignTarget?: string | Element, alignAt?: [number, number], pathTarget?: string | Element): this;
+    /**
+     * Sample the path into the lookup table at the given user-unit -> screen-px scale.
+     * Releases any previously-held LUT back to the pool before re-sampling.
+     */
+    private _buildPathLUT;
+    /**
+     * Resolve the geometry-dependent path offsets (alignOffset/pathOffset/pathScale)
+     * against the live, laid-out element.
+     *
+     * The offsets are first computed at parse time, but a target sized asynchronously
+     * (Lottie injecting its <svg>, lazy-loaded <img>, web-font reflow) can report a
+     * 0×0 / 0-height box then. That bakes `alignOffset = {x: w/2, y: 0}` — anchoring
+     * the element by its TOP edge instead of its CENTER — which is invisible on the
+     * straight runs of a path but drifts the element off curves (where it rotates).
+     *
+     * We therefore defer: each frame until the element has a real (non-degenerate)
+     * box, recompute from the live geometry, then lock in. Once resolved there is no
+     * per-frame cost. Only aligned DOM-element motion paths participate; raw path-data
+     * or plain-object targets keep their parse-time values unchanged.
+     */
+    private _resolvePathGeometryIfNeeded;
+    /**
+     * Mark the path geometry stale so it re-resolves on the next render. Called when
+     * layout may have shifted (window.load / resize ScrollTrigger refresh).
+     */
+    invalidatePathGeometry(): void;
     /**
      * Render the property at given progress (0-1)
      */

package/dist/core/Timeline.d.ts

@@ -385,6 +385,12 @@ export declare class Timeline {
      * @internal
      */
     getFirstChildAnimation(): Animation | null;
+    /**
+     * Propagate a motion-path geometry invalidation to every descendant animation,
+     * so aligned path offsets re-resolve against post-layout geometry on the next
+     * render. Called from ScrollTrigger.refresh() (window.load / resize).
+     */
+    invalidatePathGeometry(): void;
     /**
      * Get first child builder (for split-aware trigger target resolution).
      * When text splitting is active, the builder holds original pre-split targets.