ameerf-wix · Oct 19, 2026 · Oct 19, 2026 · Oct 20, 2026 · Oct 21, 2026 · Oct 21, 2026
diff --git a/README.md b/README.md
@@ -221,7 +221,7 @@ const config: InteractConfig = {
     'card-float': {
       duration: 900,
       easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
-      namedEffect: { type: 'FloatIn', direction: 'bottom' },
+      namedEffect: { type: 'FloatIn', from: 'bottom' },
     },
   },
 };
@@ -269,7 +269,7 @@ const config: InteractConfig = {
       trigger: 'viewProgress',
       effects: [
         {
-          namedEffect: { type: 'ParallaxScroll', parallaxFactor: 0.5 },
+          namedEffect: { type: 'ParallaxScroll', speed: 0.7 },
           rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
           rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
           easing: 'linear',

diff --git a/apps/playground/SPEC.md b/apps/playground/SPEC.md
@@ -299,7 +299,7 @@ For scroll/pointer-driven animations:
 - **Animation Source** toggle: same Named Effect / Keyframes radio as Time effects
 - **Timing properties**: easing, iterations, alternate, fill, reversed
 - **Range** (viewProgress only): `rangeStart` / `rangeEnd` with name (entry/exit/contain/cover) + offset (value + unit)
-- **Transition params** (pointerMove only): `transitionDuration`, `transitionDelay`, `transitionEasing`, `centeredToTarget`
+- **Transition params** (pointerMove only): `transitionDuration`, `transitionEasing`, `centeredToTarget`
 
 ### Transition Effect Editor (`<pg-transition-effect-editor>`)
 

diff --git a/apps/playground/src/components/inspector/pg-scrub-effect-editor.ts b/apps/playground/src/components/inspector/pg-scrub-effect-editor.ts
@@ -231,7 +231,6 @@ export class PgScrubEffectEditor extends BaseComponent {
     const rangeEnd = (e.rangeEnd as RangeOffset) ?? {};
 
     const transitionDuration = (e.transitionDuration as number) ?? 0;
-    const transitionDelay = (e.transitionDelay as number) ?? 0;
     const transitionEasing = (e.transitionEasing as string) ?? '';
     const centeredToTarget = (e.centeredToTarget as boolean) ?? false;
 
@@ -349,10 +348,6 @@ export class PgScrubEffectEditor extends BaseComponent {
             <label>Duration (ms)</label>
             <input type="number" class="pg-input" id="trans-duration" min="0" max="10000" step="50" value="${transitionDuration}">
           </div>
-          <div class="field">
-            <label>Delay (ms)</label>
-            <input type="number" class="pg-input" id="trans-delay" min="0" max="10000" step="50" value="${transitionDelay}">
-          </div>
         </div>
         <div class="field">
           <label>Easing</label>
@@ -502,9 +497,6 @@ export class PgScrubEffectEditor extends BaseComponent {
     shadow.getElementById('trans-duration')?.addEventListener('change', (e) => {
       update({ transitionDuration: parseInt((e.target as HTMLInputElement).value, 10) || 0 });
     });
-    shadow.getElementById('trans-delay')?.addEventListener('change', (e) => {
-      update({ transitionDelay: parseInt((e.target as HTMLInputElement).value, 10) || 0 });
-    });
     shadow.getElementById('trans-easing')?.addEventListener('change', (e) => {
       const val = (e.target as HTMLSelectElement).value;
       update({ transitionEasing: val || undefined });

diff --git a/packages/interact-validate/src/schema/effects.ts b/packages/interact-validate/src/schema/effects.ts
@@ -164,7 +164,6 @@ const viewProgressEffectFields = {
 const pointerMoveEffectFields = {
   centeredToTarget: z.boolean().optional(),
   transitionDuration: z.number().int().nonnegative().optional(),
-  transitionDelay: z.number().int().nonnegative().optional(),
   transitionEasing: z.enum(['linear', 'hardBackOut', 'easeOut', 'elastic', 'bounce']).optional(),
 };
 

diff --git a/packages/interact/README.md b/packages/interact/README.md
@@ -248,7 +248,7 @@ Each example is a complete `InteractConfig` — pass it to `Interact.create(conf
     'float-in': {
       duration: 800,
       easing: 'ease-out',
-      namedEffect: { type: 'FloatIn', direction: 'bottom' },
+      namedEffect: { type: 'FloatIn', from: 'bottom' },
     },
   },
 }

diff --git a/packages/interact/docs/api/types.md b/packages/interact/docs/api/types.md
@@ -544,7 +544,6 @@ type ScrubEffect = {
   rangeEnd?: RangeOffset;
   centeredToTarget?: boolean;
   transitionDuration?: number;
-  transitionDelay?: number;
   transitionEasing?: ScrubTransitionEasing;
 } & EffectProperty;
 ```
@@ -555,7 +554,6 @@ type ScrubEffect = {
 - `rangeEnd` - Scroll position where animation ends
 - `centeredToTarget` - Whether to center scroll range on target element
 - `transitionDuration` - Smooth transition duration when entering/exiting scrub
-- `transitionDelay` - Delay for scrub transition
 - `transitionEasing` - Easing for scrub transition
 
 **Examples:**

diff --git a/packages/interact/docs/guides/effects-and-animations.md b/packages/interact/docs/guides/effects-and-animations.md
@@ -378,7 +378,7 @@ Effect applies to different elements:
             key: 'mobile-menu',     // Different element
             namedEffect: {
                 type: 'SlideIn',
-                direction: 'down'
+                from: 'top'
             },
             duration: 300
         },

diff --git a/packages/interact/rules/full-lean.md b/packages/interact/rules/full-lean.md
@@ -418,7 +418,6 @@ Used with `viewProgress` and `pointerMove` triggers.
   composite?: 'replace' | 'add' | 'accumulate';
   centeredToTarget?: boolean;  // pointerMove; namedEffect / customEffect only — ignored for keyframeEffect
   transitionDuration?: number; // ms, smoothing on progress jumps; pointerMove + customEffect only
-  transitionDelay?: number;    // ms (primarily for pointerMove)
   transitionEasing?: 'linear' | 'hardBackOut' | 'easeOut' | 'elastic' | 'bounce'; // pointerMove + customEffect only
   // + exactly one animation payload (see below)
 }

diff --git a/packages/interact/src/types/effects.ts b/packages/interact/src/types/effects.ts
@@ -51,7 +51,6 @@ export type ScrubEffect = {
   rangeEnd?: RangeOffset;
   centeredToTarget?: boolean;
   transitionDuration?: number;
-  transitionDelay?: number;
   transitionEasing?: ScrubTransitionEasing;
 } & EffectEffectProperty;
 

diff --git a/packages/motion-presets/README.md b/packages/motion-presets/README.md
@@ -174,36 +174,36 @@ For selection by tone and atmosphere (playful, elegant, bold, soft, dramatic, mo
 
 ## Parameter Conventions
 
-### `direction`
+### `from`, `direction` and `pivot`
 
-The `direction` parameter accepts different value sets depending on the preset:
+Entrance presets use `from` — the side the element comes from. All other presets use `direction` — where the motion goes. `pivot` names the edge or corner the element rotates or scales around. The accepted values depend on the preset:
 
-| Values                                   | Example Presets                                                         |
-| ---------------------------------------- | ----------------------------------------------------------------------- |
-| `'top' \| 'right' \| 'bottom' \| 'left'` | SlideIn, FloatIn, FlipIn, FoldIn                                        |
-| `'horizontal' \| 'vertical'`             | WinkIn, ArcScroll, FlipScroll, Flip                                     |
-| `'clockwise' \| 'counter-clockwise'`     | SpinIn, SpinScroll, Spin                                                |
-| `0–360` (degrees, number)                | GlideIn, ExpandIn, MoveScroll                                           |
-| Corner values                            | TurnIn (`'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`) |
+| Values                                   | Example Presets                                                                  |
+| ---------------------------------------- | -------------------------------------------------------------------------------- |
+| `'top' \| 'right' \| 'bottom' \| 'left'` | `from`: SlideIn, FloatIn, RevealIn; `direction`: SlideScroll; `pivot`: FoldIn    |
+| `'horizontal' \| 'vertical'`             | `direction`: FlipIn, WinkIn, ArcScroll, FlipScroll, Flip                         |
+| `'clockwise' \| 'counter-clockwise'`     | `direction`: SpinIn, SpinScroll, Spin                                            |
+| `0–360` (degrees, number)                | `from`: GlideIn, ExpandIn; `direction`: MoveScroll                               |
+| Corner values                            | `pivot`: TurnIn (`'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`) |
 
-**Angle convention:** `0° = right (east)`, angles increase counter-clockwise.
+**Angle convention:** CSS convention — `0° = right`, `90° = bottom`, `180° = left`, `270° = top`.
 
 ### Distance units
 
-Prefer the `{ value, unit }` object notation:
+Movement lengths are named `travel`. Prefer the `{ value, unit }` object notation:
 
 ```typescript
 namedEffect: {
   type: 'GlideIn',
-  distance: { value: 120, unit: 'px' },
+  travel: { value: 120, unit: 'px' },
 }
 ```
 
 Supported units: `px`, `em`, `rem`, `vh`, `vw`, `vmin`, `vmax`, `percentage`.
 
 ### `iterationDelay` (ongoing only)
 
-Adds an idle pause between loop cycles. Set on the `namedEffect`:
+Adds an idle pause at rest after each loop cycle, without changing the motion itself. Set on the `namedEffect`:
 
 ```typescript
 namedEffect: { type: 'Bounce', iterationDelay: 1000 } // 1 s pause after each cycle