@wix/interact 2.0.0-rc.7 → 2.0.0

package/rules/pointermove.md

@@ -8,7 +8,7 @@ These rules help generate pointer-driven interactions using the `@wix/interact`
 
 The `pointerMove` trigger provides 2D progress (x and y coordinates). You can use:
 
-1. **`namedEffect`** (Preferred): Pre-built mouse presets from `@wix/motion` that handle 2D progress internally
+1. **`namedEffect`** (Preferred): Pre-built mouse presets from `@wix/motion-presets` that handle 2D progress internally
 2. **`customEffect`** (Advanced): Custom function receiving the 2D progress object for full control
 3. **`keyframeEffect`** (Single-axis): The pointer position on a single axis is mapped to linear 0-1 progress for keyframe animations. Use `axis: 'x'` or `axis: 'y'` (defaults to `'y'`)
 
@@ -141,7 +141,7 @@ Controls how the progress range is calculated:
             key: '[TARGET_KEY]',
             namedEffect: {
                 type: '[MOVEMENT_EFFECT_TYPE]',
-                distance: { value: [DISTANCE_VALUE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [DISTANCE_VALUE], unit: '[DISTANCE_UNIT]' },
                 axis: '[AXIS_CONSTRAINT]',
                 power: '[POWER_LEVEL]'
             },
@@ -174,7 +174,7 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 50, type: 'percentage' },
+                distance: { value: 50, unit: 'percentage' },
                 axis: 'both',
                 power: 'medium'
             },
@@ -198,7 +198,7 @@ Controls how the progress range is calculated:
             key: 'floating-element',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 30, type: 'px' },
+                distance: { value: 30, unit: 'px' },
                 axis: 'both',
                 power: 'soft'
             },
@@ -266,7 +266,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.1,
-                distance: { value: 100, type: 'px' },
+                distance: { value: 100, unit: 'px' },
                 axis: 'both',
                 power: 'medium'
             },
@@ -418,7 +418,7 @@ Controls how the progress range is calculated:
             key: '[BACKGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[BACKGROUND_EFFECT_TYPE]',
-                distance: { value: [BACKGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [BACKGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' },
                 power: '[BACKGROUND_POWER]'
             },
             centeredToTarget: [CENTERED_TO_TARGET]
@@ -427,7 +427,7 @@ Controls how the progress range is calculated:
             key: '[MIDGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[MIDGROUND_EFFECT_TYPE]',
-                distance: { value: [MIDGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [MIDGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' },
                 power: '[MIDGROUND_POWER]'
             },
             centeredToTarget: [CENTERED_TO_TARGET]
@@ -436,7 +436,7 @@ Controls how the progress range is calculated:
             key: '[FOREGROUND_LAYER_KEY]',
             namedEffect: {
                 type: '[FOREGROUND_EFFECT_TYPE]',
-                distance: { value: [FOREGROUND_DISTANCE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [FOREGROUND_DISTANCE], unit: '[DISTANCE_UNIT]' },
                 power: '[FOREGROUND_POWER]'
             },
             centeredToTarget: [CENTERED_TO_TARGET]
@@ -468,7 +468,7 @@ Controls how the progress range is calculated:
             key: 'bg-layer',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 15, type: 'px' },
+                distance: { value: 15, unit: 'px' },
                 axis: 'both',
                 power: 'soft'
             },
@@ -478,7 +478,7 @@ Controls how the progress range is calculated:
             key: 'mid-layer',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 25, type: 'px' },
+                distance: { value: 25, unit: 'px' },
                 axis: 'both',
                 power: 'medium'
             },
@@ -488,7 +488,7 @@ Controls how the progress range is calculated:
             key: 'fg-layer',
             namedEffect: {
                 type: 'BounceMouse',
-                distance: { value: 35, type: 'px' },
+                distance: { value: 35, unit: 'px' },
                 axis: 'both',
                 power: 'medium'
             },
@@ -512,7 +512,7 @@ Controls how the progress range is calculated:
             key: 'hero-bg',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 20, type: 'px' },
+                distance: { value: 20, unit: 'px' },
                 axis: 'both',
                 power: 'soft'
             },
@@ -522,7 +522,7 @@ Controls how the progress range is calculated:
             key: 'hero-content',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 40, type: 'px' },
+                distance: { value: 40, unit: 'px' },
                 axis: 'horizontal',
                 power: 'medium'
             },
@@ -533,7 +533,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.05,
-                distance: { value: 60, type: 'px' },
+                distance: { value: 60, unit: 'px' },
                 power: 'medium'
             },
             centeredToTarget: true
@@ -619,7 +619,7 @@ Controls how the progress range is calculated:
             key: 'card-shadow',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 20, type: 'px' },
+                distance: { value: 20, unit: 'px' },
                 axis: 'both',
                 power: 'soft'
             },
@@ -644,7 +644,7 @@ Controls how the progress range is calculated:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.05,
-                distance: { value: 80, type: 'px' },
+                distance: { value: 80, unit: 'px' },
                 power: 'medium'
             },
             centeredToTarget: true
@@ -653,7 +653,7 @@ Controls how the progress range is calculated:
             key: 'nav-indicator',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 15, type: 'px' },
+                distance: { value: 15, unit: 'px' },
                 axis: 'horizontal',
                 power: 'hard'
             },
@@ -689,7 +689,7 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: '[FOLLOWER_EFFECT_TYPE]',
-                distance: { value: [FOLLOWER_DISTANCE], type: '[DISTANCE_UNIT]' },
+                distance: { value: [FOLLOWER_DISTANCE], unit: '[DISTANCE_UNIT]' },
                 [FOLLOWER_PROPERTIES]
             },
             centeredToTarget: false,
@@ -721,7 +721,7 @@ Controls how the progress range is calculated:
         {
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 0, type: 'px' },
+                distance: { value: 0, unit: 'px' },
                 axis: 'both',
                 power: 'hard'
             },
@@ -1329,7 +1329,7 @@ Different hit areas for different interaction contexts:
             key: 'ambient-element',
             namedEffect: {
                 type: 'AiryMouse',
-                distance: { value: 30, type: 'px' },
+                distance: { value: 30, unit: 'px' },
                 power: 'soft'
             },
             centeredToTarget: false
@@ -1354,7 +1354,7 @@ Controlling movement direction for specific design needs:
             key: 'horizontal-slider',
             namedEffect: {
                 type: 'TrackMouse',
-                distance: { value: 100, type: 'px' },
+                distance: { value: 100, unit: 'px' },
                 axis: 'horizontal',
                 power: 'medium'
             },
@@ -1365,7 +1365,7 @@ Controlling movement direction for specific design needs:
             namedEffect: {
                 type: 'ScaleMouse',
                 scale: 1.2,
-                distance: { value: 150, type: 'px' },
+                distance: { value: 150, unit: 'px' },
                 axis: 'vertical',
                 power: 'medium'
             },

package/rules/scroll-list.md

@@ -17,7 +17,7 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 ```typescript
 {
-    key: '[CONTAINER_SELECTOR]',
+    key: '[CONTAINER_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
@@ -121,7 +121,7 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 **Variables**:
 
 - `[ITEM_KEY]`: Unique identifier for individual list items
-- `[ITEM_NAMED_EFFECT]`: Item-level scroll effects from @wix/motion scroll animations:
+- `[ITEM_NAMED_EFFECT]`: Item-level scroll effects from @wix/motion-presets scroll animations:
   - **Reveal/Fade**: 'FadeScroll', 'BlurScroll', 'RevealScroll', 'ShapeScroll', 'ShuttersScroll'
   - **Movement**: 'MoveScroll', 'SlideScroll', 'PanScroll', 'SkewPanScroll'
   - **Scale**: 'GrowScroll', 'ShrinkScroll', 'StretchScroll'
@@ -192,11 +192,11 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 ```typescript
 {
-    key: '[ITEM_CONTAINER_SELECTOR]',
+    key: '[ITEM_CONTAINER_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[CONTENT_SELECTOR]',
+            key: '[CONTENT_KEY]',
             namedEffect: {
                 type: '[CONTENT_NAMED_EFFECT]'
             },
@@ -211,9 +211,9 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 **Variables**:
 
-- `[ITEM_CONTAINER_SELECTOR]`: CSS selector for the containing list item
-- `[CONTENT_SELECTOR]`: CSS selector for content within the item
-- `[CONTENT_NAMED_EFFECT]`: Content-level scroll effects from @wix/motion:
+- `[ITEM_CONTAINER_KEY]`: Unique identifier for the containing list item
+- `[CONTENT_KEY]`: Unique identifier for content within the item (or use `selector` for CSS selector)
+- `[CONTENT_NAMED_EFFECT]`: Content-level scroll effects from @wix/motion-presets:
   - **Opacity/Visibility**: 'FadeScroll', 'BlurScroll'
   - **Reveal**: 'RevealScroll', 'ShapeScroll', 'ShuttersScroll'
   - **3D Transforms**: 'TiltScroll', 'FlipScroll', 'ArcScroll', 'TurnScroll', 'Spin3dScroll'
@@ -299,7 +299,7 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 ```typescript
 {
-    key: '[CONTAINER_SELECTOR]',
+    key: '[CONTAINER_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
@@ -510,7 +510,7 @@ These rules help generate scroll-driven list animations using the `@wix/interact
     },
     interactions: [
         {
-            key: '[ITEM_SELECTOR_N]',
+            key: '[ITEM_KEY_N]',
             trigger: 'viewProgress',
             effects: [
                 {
@@ -637,12 +637,12 @@ These rules help generate scroll-driven list animations using the `@wix/interact
 
 ```typescript
 {
-    key: '[LIST_CONTAINER_SELECTOR]',
+    key: '[LIST_CONTAINER_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[DYNAMIC_CONTENT_SELECTOR]',
-            customEffect: (element, progress, params) => {
+            key: '[DYNAMIC_CONTENT_KEY]',
+            customEffect: (element, progress) => {
                 // progress is 0-1 representing scroll position within range
                 [CUSTOM_CALCULATION_LOGIC]
                 [DYNAMIC_CONTENT_UPDATE]

package/rules/viewenter.md

@@ -17,7 +17,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewEnter',
     params: {
         type: 'once',
@@ -26,7 +26,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
     },
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]',
@@ -39,8 +39,8 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 **Variables**:
 
-- `[SOURCE_SELECTOR]`: Unique identifier for element that triggers when visible (often same as target key)
-- `[TARGET_SELECTOR]`: Unique identifier for element to animate (can be same as source or different)
+- `[SOURCE_KEY]`: Unique identifier for element that triggers when visible (often same as target key)
+- `[TARGET_KEY]`: Unique identifier for element to animate (can be same as source or different)
 - `[VISIBILITY_THRESHOLD]`: Number between 0-1 indicating how much of element must be visible (e.g., 0.3 = 30%)
 - `[VIEWPORT_INSETS]`: String insets around viewport (e.g., '50px', '10%', '-100px')
 - `[EFFECT_TYPE]`: Either `namedEffect` or `keyframeEffect`
@@ -121,7 +121,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 ```typescript
 {
-    key: '[OBSERVER_SELECTOR]',
+    key: '[OBSERVER_KEY]',
     trigger: 'viewEnter',
     params: {
         type: 'repeat',
@@ -130,7 +130,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
     },
     effects: [
         {
-            key: '[ANIMATION_TARGET_SELECTOR]',
+            key: '[ANIMATION_TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]',
@@ -143,8 +143,8 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 **Variables**:
 
-- `[OBSERVER_SELECTOR]`: CSS selector for element that acts as scroll trigger
-- `[ANIMATION_TARGET_SELECTOR]`: CSS selector for element that gets animated (different from observer)
+- `[OBSERVER_KEY]`: Unique identifier for element that acts as scroll trigger
+- `[ANIMATION_TARGET_KEY]`: Unique identifier for element that gets animated (different from observer)
 - Other variables same as Rule 1
 
 **Example - Image Reveal on Scroll**:
@@ -219,7 +219,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
 
 ```typescript
 {
-    key: '[OBSERVER_SELECTOR]',
+    key: '[OBSERVER_KEY]',
     trigger: 'viewEnter',
     params: {
         type: 'alternate',
@@ -228,7 +228,7 @@ These rules help generate viewport-based interactions using the `@wix/interact`
     },
     effects: [
         {
-            key: '[ANIMATION_TARGET_SELECTOR]',
+            key: '[ANIMATION_TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]',
@@ -316,7 +316,7 @@ Same as Rule 2
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewEnter',
     params: {
         type: 'state',
@@ -325,7 +325,7 @@ Same as Rule 2
     },
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]',
@@ -417,7 +417,7 @@ Same as Rule 2
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewEnter',
     params: {
         type: '[BEHAVIOR_TYPE]',
@@ -426,7 +426,7 @@ Same as Rule 2
     },
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             [EFFECT_TYPE]: [EFFECT_DEFINITION],
             duration: [DURATION_MS],
             easing: '[EASING_FUNCTION]'
@@ -576,7 +576,7 @@ Same as Rule 2
 
 **Variables**:
 
-- `[ELEMENT_N_SELECTOR]`: CSS selector for each individual element in sequence
+- `[ELEMENT_N_KEY]`: Unique identifier for each individual element in sequence
 - `[DELAY_N]`: Progressive delay values (e.g., 0, 100, 200, 300ms)
 - `[SHARED_*]`: Common values used across all elements in the sequence
 - Other variables same as Rule 1
@@ -885,14 +885,14 @@ Combining with conditions for responsive behavior:
 
 ## Preventing Flash of Unstyled Content (FOUC)
 
-When using `viewEnter` with for entrance animations, elements may briefly appear in their final state before the animation plays. Use the `generate` function to create critical CSS that prevents this.
+When using `viewEnter` for entrance animations, elements may briefly appear in their final state before the animation plays. Use the `generate` function to create critical CSS that prevents this.
 
 ### Using the `generate` Function
 
 **Import and generate CSS:**
 
-````typescript
-import { generate } from '@wix/interact';
+```typescript
+import { generate } from '@wix/interact/web';
 
 const config: InteractConfig = {
   interactions: [
@@ -904,19 +904,13 @@ const config: InteractConfig = {
         {
           namedEffect: { type: 'FadeIn' },
           duration: 800,
-          fill: 'backwards'
-        }
-      ]
-    }
-  ]
+          fill: 'backwards',
+        },
+      ],
+    },
+  ],
 };
 
-/**Usage:**
-```javascript
-import { generate } from '@wix/interact';
-
-const config = {/*...*/};
-
 // Generate CSS at build time or on server
 const css = generate(config);
 
@@ -938,7 +932,7 @@ const html = `
 </body>
 </html>
 `;
-````
+```
 
 ### Generated CSS Behavior
 

package/rules/viewprogress.md

@@ -17,11 +17,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             keyframeEffect: {
               name: '[EFFECT_NAME]',
               keyframes: [EFFECT_KEYFRAMES]
@@ -38,8 +38,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 
 **Variables**:
 
-- `[SOURCE_SELECTOR]`: Unique identifier for element that tracks scroll progress
-- `[TARGET_SELECTOR]`: Unique identifier for element to animate (can be same as source or different)
+- `[SOURCE_KEY]`: Unique identifier for element that tracks scroll progress
+- `[TARGET_KEY]`: Unique identifier for element to animate (can be same as source or different)
 - `[EFFECT_NAME]`: Optional unique name for the effec
 - `[EFFECT_KEYFRAMES]`: Keyframes for the effect
 - `[RANGE_NAME]`: 'cover', 'contain', 'entry', 'exit', 'entry-crossing', or 'exit-crossing'
@@ -52,11 +52,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             namedEffect: {
               type: '[NAMED_EFFECT]'
             },
@@ -69,7 +69,7 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 }
 ```
 
-- `[NAMED_EFFECT]`: Pre-built scroll effect name from @wix/motion (e.g., 'ParallaxScroll', 'MoveScroll', 'FadeScroll', 'RevealScroll', 'GrowScroll', 'SlideScroll', 'SpinScroll', 'PanScroll', 'BlurScroll', 'ArcScroll', 'FlipScroll', 'Spin3dScroll', 'TiltScroll', 'TurnScroll', 'ShapeScroll', 'ShuttersScroll', 'ShrinkScroll', 'SkewPanScroll', 'StretchScroll')
+- `[NAMED_EFFECT]`: Pre-built scroll effect name from @wix/motion-presets (e.g., 'ParallaxScroll', 'MoveScroll', 'FadeScroll', 'RevealScroll', 'GrowScroll', 'SlideScroll', 'SpinScroll', 'PanScroll', 'BlurScroll', 'ArcScroll', 'FlipScroll', 'Spin3dScroll', 'TiltScroll', 'TurnScroll', 'ShapeScroll', 'ShuttersScroll', 'ShrinkScroll', 'SkewPanScroll', 'StretchScroll')
 
 **Example - Background Parallax**:
 
@@ -108,11 +108,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             namedEffect: {
                 type: '[ENTRANCE_EFFECT]'
             },
@@ -127,7 +127,7 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 
 **Variables**:
 
-- `[ENTRANCE_EFFECT]`: Named entrance effect from @wix/motion scroll animations (e.g., 'FadeScroll', 'SlideScroll', 'RevealScroll', 'ShapeScroll', 'GrowScroll', 'MoveScroll', 'BlurScroll')
+- `[ENTRANCE_EFFECT]`: Named entrance effect from @wix/motion-presets scroll animations (e.g., 'FadeScroll', 'SlideScroll', 'RevealScroll', 'ShapeScroll', 'GrowScroll', 'MoveScroll', 'BlurScroll')
 - `[ENTRY_START]`: Entry animation start percentage (typically 0-30)
 - `[ENTRY_END]`: Entry animation end percentage (typically 70-100)
 - Other variables same as Rule 1
@@ -191,11 +191,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             keyframeEffect: {
                 name: '[EFFECT_NAME]',
                 keyframes: [EFFECT_KEYFRAMES]
@@ -226,7 +226,7 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
         {
             key: 'hero-text',
             keyframeEffect: {
-                name: 'fade-out'
+                name: 'fade-out',
                 keyframes: [{
                     opacity: 0
                 }]
@@ -257,11 +257,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             keyframeEffect: {
                 name: '[UNIQUE_KEYFRAME_EFFECT_NAME]',
                 keyframes: [
@@ -329,7 +329,7 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
                     { transform: 'scale(1) translateY(-100px)', filter: 'blur(2px)' }
                 ]
             },
-            rangeStart: { name: 'enter', offset: { type: 'percentage', value: 0 } },
+            rangeStart: { name: 'entry', offset: { type: 'percentage', value: 0 } },
             rangeEnd: { name: 'exit', offset: { type: 'percentage', value: 100 } },
             easing: 'linear',
             fill: 'both',
@@ -356,11 +356,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             keyframeEffect: {
                 name: '[UNIQUE_KEYFRAME_EFFECT_NAME]',
                 keyframes: [
@@ -449,11 +449,11 @@ Same as Rule 4, with focus on entry range
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
+            key: '[TARGET_KEY]',
             keyframeEffect: {
                 name: '[UNIQUE_KEYFRAME_EFFECT_NAME]',
                 keyframes: [
@@ -542,12 +542,12 @@ Same as Rule 4, with focus on exit range
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
-            customEffect: (element, progress, params) => {
+            key: '[TARGET_KEY]',
+            customEffect: (element, progress) => {
                 // progress is 0-1 representing scroll position within range
                 [CUSTOM_ANIMATION_LOGIC]
             },
@@ -640,12 +640,12 @@ Same as Rule 4, with focus on exit range
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
-            customEffect: (element, progress, params) => {
+            key: '[TARGET_KEY]',
+            customEffect: (element, progress) => {
                 // progress is 0-1 representing entry progress
                 [ENTRY_ANIMATION_LOGIC]
             },
@@ -734,12 +734,12 @@ Same as Rule 4, with focus on exit range
 
 ```typescript
 {
-    key: '[SOURCE_SELECTOR]',
+    key: '[SOURCE_KEY]',
     trigger: 'viewProgress',
     effects: [
         {
-            key: '[TARGET_SELECTOR]',
-            customEffect: (element, progress, params) => {
+            key: '[TARGET_KEY]',
+            customEffect: (element, progress) => {
                 // progress is 0-1 representing exit progress
                 [EXIT_ANIMATION_LOGIC]
             },