@wix/interact 2.0.0-rc.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/cjs/react.js +1 -1
  3. package/dist/cjs/web.js +1 -1
  4. package/dist/es/index.js +1 -1
  5. package/dist/es/react.js +2 -2
  6. package/dist/es/web.js +2 -2
  7. package/dist/{index-Bs9cjD_x.js → index-muYJHOYV.js} +3 -3
  8. package/dist/{index-Bs9cjD_x.js.map → index-muYJHOYV.js.map} +1 -1
  9. package/dist/{index-DsvFkLS4.mjs → index-wDdpOvzw.mjs} +5 -5
  10. package/dist/{index-DsvFkLS4.mjs.map → index-wDdpOvzw.mjs.map} +1 -1
  11. package/dist/tsconfig.build.tsbuildinfo +1 -1
  12. package/docs/README.md +39 -73
  13. package/docs/api/README.md +1 -1
  14. package/docs/api/functions.md +22 -37
  15. package/docs/api/interact-class.md +31 -20
  16. package/docs/api/interaction-controller.md +18 -54
  17. package/docs/api/types.md +29 -142
  18. package/docs/guides/effects-and-animations.md +9 -9
  19. package/docs/guides/understanding-triggers.md +11 -9
  20. package/docs/integration/react.md +15 -12
  21. package/package.json +3 -4
  22. package/rules/click.md +6 -6
  23. package/rules/full-lean.md +15 -17
  24. package/rules/hover.md +2 -2
  25. package/rules/integration.md +11 -9
  26. package/rules/pointermove.md +22 -22
  27. package/rules/scroll-list.md +12 -12
  28. package/rules/viewenter.md +24 -30
  29. package/rules/viewprogress.md +29 -29
package/rules/viewprogress.md CHANGED
@@ -17,11 +17,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
17
17
 
18
18
  ```typescript
19
19
  {
20
- key: '[SOURCE_SELECTOR]',
20
+ key: '[SOURCE_KEY]',
21
21
  trigger: 'viewProgress',
22
22
  effects: [
23
23
  {
24
- key: '[TARGET_SELECTOR]',
24
+ key: '[TARGET_KEY]',
25
25
  keyframeEffect: {
26
26
  name: '[EFFECT_NAME]',
27
27
  keyframes: [EFFECT_KEYFRAMES]
@@ -38,8 +38,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
38
38
 
39
39
  **Variables**:
40
40
 
41
- - `[SOURCE_SELECTOR]`: Unique identifier for element that tracks scroll progress
42
- - `[TARGET_SELECTOR]`: Unique identifier for element to animate (can be same as source or different)
41
+ - `[SOURCE_KEY]`: Unique identifier for element that tracks scroll progress
42
+ - `[TARGET_KEY]`: Unique identifier for element to animate (can be same as source or different)
43
43
  - `[EFFECT_NAME]`: Optional unique name for the effec
44
44
  - `[EFFECT_KEYFRAMES]`: Keyframes for the effect
45
45
  - `[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
52
52
 
53
53
  ```typescript
54
54
  {
55
- key: '[SOURCE_SELECTOR]',
55
+ key: '[SOURCE_KEY]',
56
56
  trigger: 'viewProgress',
57
57
  effects: [
58
58
  {
59
- key: '[TARGET_SELECTOR]',
59
+ key: '[TARGET_KEY]',
60
60
  namedEffect: {
61
61
  type: '[NAMED_EFFECT]'
62
62
  },
@@ -69,7 +69,7 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
69
69
  }
70
70
  ```
71
71
 
72
- - `[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')
72
+ - `[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')
73
73
 
74
74
  **Example - Background Parallax**:
75
75
 
@@ -108,11 +108,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
108
108
 
109
109
  ```typescript
110
110
  {
111
- key: '[SOURCE_SELECTOR]',
111
+ key: '[SOURCE_KEY]',
112
112
  trigger: 'viewProgress',
113
113
  effects: [
114
114
  {
115
- key: '[TARGET_SELECTOR]',
115
+ key: '[TARGET_KEY]',
116
116
  namedEffect: {
117
117
  type: '[ENTRANCE_EFFECT]'
118
118
  },
@@ -127,7 +127,7 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
127
127
 
128
128
  **Variables**:
129
129
 
130
- - `[ENTRANCE_EFFECT]`: Named entrance effect from @wix/motion scroll animations (e.g., 'FadeScroll', 'SlideScroll', 'RevealScroll', 'ShapeScroll', 'GrowScroll', 'MoveScroll', 'BlurScroll')
130
+ - `[ENTRANCE_EFFECT]`: Named entrance effect from @wix/motion-presets scroll animations (e.g., 'FadeScroll', 'SlideScroll', 'RevealScroll', 'ShapeScroll', 'GrowScroll', 'MoveScroll', 'BlurScroll')
131
131
  - `[ENTRY_START]`: Entry animation start percentage (typically 0-30)
132
132
  - `[ENTRY_END]`: Entry animation end percentage (typically 70-100)
133
133
  - Other variables same as Rule 1
@@ -191,11 +191,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
191
191
 
192
192
  ```typescript
193
193
  {
194
- key: '[SOURCE_SELECTOR]',
194
+ key: '[SOURCE_KEY]',
195
195
  trigger: 'viewProgress',
196
196
  effects: [
197
197
  {
198
- key: '[TARGET_SELECTOR]',
198
+ key: '[TARGET_KEY]',
199
199
  keyframeEffect: {
200
200
  name: '[EFFECT_NAME]',
201
201
  keyframes: [EFFECT_KEYFRAMES]
@@ -226,7 +226,7 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
226
226
  {
227
227
  key: 'hero-text',
228
228
  keyframeEffect: {
229
- name: 'fade-out'
229
+ name: 'fade-out',
230
230
  keyframes: [{
231
231
  opacity: 0
232
232
  }]
@@ -257,11 +257,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
257
257
 
258
258
  ```typescript
259
259
  {
260
- key: '[SOURCE_SELECTOR]',
260
+ key: '[SOURCE_KEY]',
261
261
  trigger: 'viewProgress',
262
262
  effects: [
263
263
  {
264
- key: '[TARGET_SELECTOR]',
264
+ key: '[TARGET_KEY]',
265
265
  keyframeEffect: {
266
266
  name: '[UNIQUE_KEYFRAME_EFFECT_NAME]',
267
267
  keyframes: [
@@ -329,7 +329,7 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
329
329
  { transform: 'scale(1) translateY(-100px)', filter: 'blur(2px)' }
330
330
  ]
331
331
  },
332
- rangeStart: { name: 'enter', offset: { type: 'percentage', value: 0 } },
332
+ rangeStart: { name: 'entry', offset: { type: 'percentage', value: 0 } },
333
333
  rangeEnd: { name: 'exit', offset: { type: 'percentage', value: 100 } },
334
334
  easing: 'linear',
335
335
  fill: 'both',
@@ -356,11 +356,11 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
356
356
 
357
357
  ```typescript
358
358
  {
359
- key: '[SOURCE_SELECTOR]',
359
+ key: '[SOURCE_KEY]',
360
360
  trigger: 'viewProgress',
361
361
  effects: [
362
362
  {
363
- key: '[TARGET_SELECTOR]',
363
+ key: '[TARGET_KEY]',
364
364
  keyframeEffect: {
365
365
  name: '[UNIQUE_KEYFRAME_EFFECT_NAME]',
366
366
  keyframes: [
@@ -449,11 +449,11 @@ Same as Rule 4, with focus on entry range
449
449
 
450
450
  ```typescript
451
451
  {
452
- key: '[SOURCE_SELECTOR]',
452
+ key: '[SOURCE_KEY]',
453
453
  trigger: 'viewProgress',
454
454
  effects: [
455
455
  {
456
- key: '[TARGET_SELECTOR]',
456
+ key: '[TARGET_KEY]',
457
457
  keyframeEffect: {
458
458
  name: '[UNIQUE_KEYFRAME_EFFECT_NAME]',
459
459
  keyframes: [
@@ -542,12 +542,12 @@ Same as Rule 4, with focus on exit range
542
542
 
543
543
  ```typescript
544
544
  {
545
- key: '[SOURCE_SELECTOR]',
545
+ key: '[SOURCE_KEY]',
546
546
  trigger: 'viewProgress',
547
547
  effects: [
548
548
  {
549
- key: '[TARGET_SELECTOR]',
550
- customEffect: (element, progress, params) => {
549
+ key: '[TARGET_KEY]',
550
+ customEffect: (element, progress) => {
551
551
  // progress is 0-1 representing scroll position within range
552
552
  [CUSTOM_ANIMATION_LOGIC]
553
553
  },
@@ -640,12 +640,12 @@ Same as Rule 4, with focus on exit range
640
640
 
641
641
  ```typescript
642
642
  {
643
- key: '[SOURCE_SELECTOR]',
643
+ key: '[SOURCE_KEY]',
644
644
  trigger: 'viewProgress',
645
645
  effects: [
646
646
  {
647
- key: '[TARGET_SELECTOR]',
648
- customEffect: (element, progress, params) => {
647
+ key: '[TARGET_KEY]',
648
+ customEffect: (element, progress) => {
649
649
  // progress is 0-1 representing entry progress
650
650
  [ENTRY_ANIMATION_LOGIC]
651
651
  },
@@ -734,12 +734,12 @@ Same as Rule 4, with focus on exit range
734
734
 
735
735
  ```typescript
736
736
  {
737
- key: '[SOURCE_SELECTOR]',
737
+ key: '[SOURCE_KEY]',
738
738
  trigger: 'viewProgress',
739
739
  effects: [
740
740
  {
741
- key: '[TARGET_SELECTOR]',
742
- customEffect: (element, progress, params) => {
741
+ key: '[TARGET_KEY]',
742
+ customEffect: (element, progress) => {
743
743
  // progress is 0-1 representing exit progress
744
744
  [EXIT_ANIMATION_LOGIC]
745
745
  },