@motion.page/sdk 1.2.2 → 1.2.4

package/dist/render/CSSRenderer.d.ts

@@ -24,6 +24,13 @@ export declare function setCSSProperty(element: Element, property: string, value
  * so the browser resolves mixed units natively.
  */
 export declare function setCSSMixedUnitProperty(element: Element, property: string, startValue: number, startUnit: string, endValue: number, endUnit: string, progress: number): void;
+/**
+ * Set a compound CSS string property (transform-origin, background-position, …)
+ * verbatim. Unlike setCSSProperty, the value is a full multi-token CSS string
+ * already assembled by the caller, so it's written as-is (no value+unit
+ * concatenation). Batches during a tick, writes immediately otherwise.
+ */
+export declare function setCSSStringProperty(element: Element, property: string, value: string): void;
 /**
  * Set a CSS color property value on an element
  * Takes RGBA values directly for performance (avoids string formatting in hot path)

package/dist/triggers/MouseMoveTrigger.d.ts

@@ -40,6 +40,20 @@ export declare class MouseMoveTrigger extends BaseTrigger<MouseMoveConfig> {
      * Called by TriggerManager on resize.
      */
     refresh(): void;
+    private _scrollX;
+    private _scrollY;
+    /**
+     * Capture an element's layout rect in DOCUMENT coordinates (viewport rect at
+     * rest + current scroll). getLayoutRect strips transforms so an animating
+     * target doesn't feed back into the measurement.
+     */
+    private _captureDocRect;
+    /**
+     * Convert a document-space rect to the current viewport position using the
+     * live scroll offset. This is what makes a target captured below the fold
+     * become hittable once it scrolls into view.
+     */
+    private _viewportRect;
     private _addTargetListeners;
     private _handleTargetPointerMove;
     private _findTargetAtPoint;

package/dist/triggers/PinManager.d.ts

@@ -39,6 +39,7 @@ export declare class PinManager {
     private _fixedTop;
     private _fixedLeft;
     private _width;
+    private _gridPlacement;
     private _fixedBreakingAncestors;
     private _isBodyPin;
     private _originalHtmlHeight;
@@ -54,6 +55,31 @@ export declare class PinManager {
      * @param useFixedPin - true for window scroller (position:fixed), false for custom (transform)
      */
     setup(element: HTMLElement, pinStart: number, pinEnd: number, scrollerStartOffset: number, useFixedPin: boolean, pinSpacing?: boolean | 'margin' | 'padding'): void;
+    /**
+     * Measure the element's layout rect for spacer + pin sizing, recovering a real
+     * size when the element has collapsed to 0 in normal flow.
+     *
+     * Normally this is just `getBoundingClientRect()`. But an element whose box is
+     * driven entirely by percentage/auto dimensions with no definite-size ancestor
+     * — e.g. an inline `<svg>` that has only a `viewBox` (no width/height attrs)
+     * and `width: 100%`, living in a shrink-to-fit flex column — collapses to a 0
+     * width (and/or height) in normal flow. The spacer and the pinned element would
+     * then lock that 0, leaving the element invisible: any scroll animation on it
+     * (e.g. `scale`) still runs, but on a 0×0 box, so nothing shows.
+     *
+     * GSAP's `pinSpacing` sidesteps this by wrapping the pinned element in a div
+     * with a FIXED width/height to match its rendered size. To achieve the same,
+     * when the in-flow measurement is degenerate (0 width or height) we briefly
+     * take the element out of the shrink-to-fit flow (`position: absolute`, hidden
+     * to avoid any flash) so its percentage/`max-*` dimensions resolve against a
+     * real containing block, read the recovered rect, then restore the exact prior
+     * inline styles. The recovery is used only when it actually yields a non-zero
+     * box; otherwise the original rect is returned unchanged.
+     *
+     * Non-degenerate elements skip the recovery entirely, so normal pins are
+     * byte-identical to before.
+     */
+    private _measurePinRect;
     /**
      * Update pin state based on scroll position
      */

package/dist/triggers/ScrollTrigger.d.ts

@@ -65,6 +65,13 @@ export declare class ScrollTrigger extends BaseTrigger<ScrollConfig> {
      * Resolve the trigger element from config or first animation
      */
     private _resolveTriggerElement;
+    /**
+     * Resolve the element the `end` position is measured against (GSAP `endTrigger`
+     * parity). Returns null when no `endTarget` is configured or it matches nothing,
+     * in which case `end` is measured against the start/trigger element — the
+     * default GSAP behaviour.
+     */
+    private _resolveEndTargetElement;
     /**
      * Calculate trigger start/end scroll positions based on config.
      *

package/dist/types/index.d.ts

@@ -386,6 +386,16 @@ export interface ClickConfig {
 }
 export interface ScrollConfig {
     target?: string | Element;
+    /**
+     * Optional element the `end` position is measured against, when it differs
+     * from `target`. Mirrors GSAP ScrollTrigger's `endTrigger`: `start` is resolved
+     * relative to `target`, `end` relative to `endTarget`. When omitted, `end` is
+     * resolved against `target` (GSAP's default). Used by v2→v3 migrations that
+     * carried a distinct end element (e.g. a seed pinned from its own bottom until a
+     * taller sibling's bottom). Ignored when `end` is a relative `+=`/`-=` offset,
+     * which is always measured from the start position.
+     */
+    endTarget?: string | Element;
     start?: string;
     end?: string;
     scrub?: boolean | number;

package/dist/utils/PathParser.d.ts

@@ -65,6 +65,26 @@ export declare function calculateElementOffset(element: string | Element | undef
     x: number;
     y: number;
 };
+/**
+ * Resolve the user-unit -> screen-pixel scale of an SVG path target.
+ *
+ * A `<path>` inside an `<svg viewBox="0 0 227 1358">` that renders 400px wide is
+ * scaled ~1.76x on X: its `d` coordinates are in viewBox user units, not CSS px.
+ * `getPointAtLength` returns user units, so an HTML element translated by those
+ * raw values drifts off the visible line. This returns the per-axis scale so the
+ * sampled trajectory can be converted into the same pixel space the path renders
+ * in (mirrors what GSAP's MotionPathPlugin did via the path's CTM).
+ *
+ * Raw path-data strings and off-DOM targets have no rendered geometry, so they
+ * return {1, 1} (no scaling — unchanged legacy behavior).
+ *
+ * @param target - The path `target` (CSS selector, Element, or raw "d" string)
+ * @returns Per-axis scale factor; {x:1, y:1} when not an on-DOM SVG element
+ */
+export declare function resolvePathScreenScale(target: string | Element): {
+    x: number;
+    y: number;
+};
 /**
  * Calculate offset to position path relative to an align element
  * The path's first point (M command) will be positioned at the align element's center
@@ -72,9 +92,13 @@ export declare function calculateElementOffset(element: string | Element | undef
  * @param align - Element or selector to align the path to
  * @param pathData - SVG path data string
  * @param animatedElement - The element being animated (to calculate relative offset)
+ * @param pathScale - User-unit -> screen-px scale applied to the path's first point
  * @returns Offset to add to path coordinates
  */
-export declare function calculatePathAlignOffset(align: string | Element | undefined, pathData: string, animatedElement?: Element): {
+export declare function calculatePathAlignOffset(align: string | Element | undefined, pathData: string, animatedElement?: Element, pathScale?: {
+    x: number;
+    y: number;
+}): {
     x: number;
     y: number;
 };

package/dist/utils/PropertyParser/constants.d.ts

@@ -5,6 +5,9 @@
 export declare const TRANSFORM_PROPS: Set<string>;
 export declare const PX_PROPS: Set<string>;
 export declare const DEG_PROPS: Set<string>;
+export declare const STRING_PROPS: Set<string>;
+export declare const TRANSFORM_CONFIG_STRING_PROPS: Set<string>;
+export declare const KEYWORD_PROPS: Set<string>;
 export declare const UNITLESS_PROPS: Set<string>;
 export declare const COLOR_PROPS: Set<string>;
 export declare const NAMED_COLORS: Set<string>;

package/dist/utils/PropertyParser/index.d.ts

@@ -17,7 +17,7 @@
  * `./register` import here.
  */
 export type { PropertyValue, ParsedProperty } from './types';
-export { isTransformProp, isColorProp, isFilterProp, isDrawSVGProp, isPathProp, isClipPathProp, isCSSVariable, looksLikeColor, } from './predicates';
+export { isTransformProp, isColorProp, isFilterProp, isDrawSVGProp, isPathProp, isClipPathProp, isStringProp, isTransformConfigProp, isKeywordProp, isCSSVariable, looksLikeColor, } from './predicates';
 export { parseValue, getDefaultUnit, getCurrentValue, convertPxToUnit, getCurrentValueInUnit, getOriginalCSSValueWithUnit, camelToKebab, } from './units';
 export { isRelativeValue, getRelativeOperator, calculateRelativeValue, } from './relative';
 export { parseProperty } from './parsers';

package/dist/utils/PropertyParser/predicates.d.ts

@@ -27,6 +27,26 @@ export declare function isPathProp(prop: string): boolean;
  * Check if a property is the clip-path property (accepts both kebab and camel case)
  */
 export declare function isClipPathProp(prop: string): boolean;
+/**
+ * Check if a property is a compound CSS string property (transform-origin,
+ * background-position, …) that must be applied verbatim rather than parsed as
+ * a single numeric scalar.
+ */
+export declare function isStringProp(prop: string): boolean;
+/**
+ * Check if a property is a discrete keyword property (pointer-events, visibility,
+ * …) whose value is a non-numeric CSS keyword. These must be applied verbatim
+ * (via the string renderer) rather than parsed as a numeric scalar, which would
+ * turn `none`/`hidden` into `0` and have the browser ignore the invalid value.
+ */
+export declare function isKeywordProp(prop: string): boolean;
+/**
+ * Check if a property configures a transform's reference point (transform-origin,
+ * perspective-origin). These are "set and hold": when only one endpoint specifies
+ * them they stay constant for the whole tween instead of decaying to/from the
+ * element's natural origin (which would move the transform pivot mid-tween).
+ */
+export declare function isTransformConfigProp(prop: string): boolean;
 /**
  * Check if a property is a CSS variable (custom property)
  */

package/dist/utils/PropertyParser/types.d.ts

@@ -27,6 +27,16 @@ export interface ParsedScalarProperty extends ParsedPropertyBase {
     startUnit?: string;
     endUnit?: string;
 }
+/**
+ * Compound CSS string property (transform-origin, background-position, …).
+ * Holds the raw start/end strings; PropTween interpolates them component-wise
+ * when every token is numeric and snaps otherwise.
+ */
+export interface ParsedStringProperty extends ParsedPropertyBase {
+    type: 'string';
+    startString: string;
+    endString: string;
+}
 /**
  * Color property (RGBA values)
  */
@@ -78,8 +88,15 @@ export interface ParsedPathProperty extends ParsedPropertyBase {
         x: number;
         y: number;
     };
+    pathScale: {
+        x: number;
+        y: number;
+    };
+    alignTarget?: string | Element;
+    alignAt: [number, number];
+    pathTarget: string | Element;
 }
 /**
  * Discriminated union of all parsed property types
  */
-export type ParsedProperty = ParsedScalarProperty | ParsedColorProperty | ParsedFilterProperty | ParsedDrawSVGProperty | ParsedPathProperty | ParsedClipPathProperty;
+export type ParsedProperty = ParsedScalarProperty | ParsedStringProperty | ParsedColorProperty | ParsedFilterProperty | ParsedDrawSVGProperty | ParsedPathProperty | ParsedClipPathProperty;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion.page/sdk",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "High-performance CSS animation SDK with scroll, hover, gesture, and cursor triggers",
   "type": "module",
   "main": "dist/index.js",