@wix/interact 2.0.0 → 2.0.1
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.
- package/README.md +2 -2
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/react.js +1 -1
- package/dist/cjs/web.js +1 -1
- package/dist/es/index.js +1 -1
- package/dist/es/react.js +2 -2
- package/dist/es/web.js +2 -2
- package/dist/{index-wDdpOvzw.mjs → index-BnI6W-7u.mjs} +130 -124
- package/dist/{index-wDdpOvzw.mjs.map → index-BnI6W-7u.mjs.map} +1 -1
- package/dist/{index-muYJHOYV.js → index-emAFXYqb.js} +5 -5
- package/dist/{index-muYJHOYV.js.map → index-emAFXYqb.js.map} +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/core/add.d.ts.map +1 -1
- package/docs/api/types.md +2 -2
- package/package.json +1 -1
- package/rules/click.md +2 -4
- package/rules/full-lean.md +3 -3
- package/rules/hover.md +2 -4
- package/rules/integration.md +28 -4
- package/rules/pointermove.md +33 -65
- package/rules/scroll-list.md +54 -54
- package/rules/viewenter.md +0 -3
- package/rules/viewprogress.md +68 -68
package/rules/viewprogress.md
CHANGED
|
@@ -26,8 +26,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
26
26
|
name: '[EFFECT_NAME]',
|
|
27
27
|
keyframes: [EFFECT_KEYFRAMES]
|
|
28
28
|
},
|
|
29
|
-
rangeStart: { name: '[RANGE_NAME]', offset: {
|
|
30
|
-
rangeEnd: { name: '[RANGE_NAME]', offset: {
|
|
29
|
+
rangeStart: { name: '[RANGE_NAME]', offset: { unit: 'percentage', value: [START_PERCENTAGE] } },
|
|
30
|
+
rangeEnd: { name: '[RANGE_NAME]', offset: { unit: 'percentage', value: [END_PERCENTAGE] } },
|
|
31
31
|
easing: '[EASING_FUNCTION]',
|
|
32
32
|
fill: 'both',
|
|
33
33
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
@@ -60,8 +60,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
60
60
|
namedEffect: {
|
|
61
61
|
type: '[NAMED_EFFECT]'
|
|
62
62
|
},
|
|
63
|
-
rangeStart: { name: '[RANGE_NAME]', offset: {
|
|
64
|
-
rangeEnd: { name: '[RANGE_NAME]', offset: {
|
|
63
|
+
rangeStart: { name: '[RANGE_NAME]', offset: { unit: 'percentage', value: [START_PERCENTAGE] } },
|
|
64
|
+
rangeEnd: { name: '[RANGE_NAME]', offset: { unit: 'percentage', value: [END_PERCENTAGE] } },
|
|
65
65
|
easing: '[EASING_FUNCTION]',
|
|
66
66
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
67
67
|
}
|
|
@@ -83,8 +83,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
83
83
|
namedEffect: {
|
|
84
84
|
type: 'ParallaxScroll'
|
|
85
85
|
},
|
|
86
|
-
rangeStart: { name: 'cover', offset: {
|
|
87
|
-
rangeEnd: { name: 'cover', offset: {
|
|
86
|
+
rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
|
|
87
|
+
rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
|
|
88
88
|
easing: 'linear'
|
|
89
89
|
}
|
|
90
90
|
]
|
|
@@ -116,8 +116,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
116
116
|
namedEffect: {
|
|
117
117
|
type: '[ENTRANCE_EFFECT]'
|
|
118
118
|
},
|
|
119
|
-
rangeStart: { name: 'entry', offset: {
|
|
120
|
-
rangeEnd: { name: 'entry', offset: {
|
|
119
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: [ENTRY_START] } },
|
|
120
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: [ENTRY_END] } },
|
|
121
121
|
easing: '[EASING_FUNCTION]',
|
|
122
122
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
123
123
|
}
|
|
@@ -145,8 +145,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
145
145
|
type: 'RevealScroll',
|
|
146
146
|
direction: 'left'
|
|
147
147
|
},
|
|
148
|
-
rangeStart: { name: 'entry', offset: {
|
|
149
|
-
rangeEnd: { name: 'entry', offset: {
|
|
148
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 0 } },
|
|
149
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: 60 } },
|
|
150
150
|
easing: 'ease-out'
|
|
151
151
|
}
|
|
152
152
|
]
|
|
@@ -165,8 +165,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
165
165
|
namedEffect: {
|
|
166
166
|
type: 'FadeScroll'
|
|
167
167
|
},
|
|
168
|
-
rangeStart: { name: 'entry', offset: {
|
|
169
|
-
rangeEnd: { name: 'entry', offset: {
|
|
168
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 20 } },
|
|
169
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: 80 } },
|
|
170
170
|
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
171
171
|
effectId: 'image-reveal'
|
|
172
172
|
}
|
|
@@ -200,8 +200,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
200
200
|
name: '[EFFECT_NAME]',
|
|
201
201
|
keyframes: [EFFECT_KEYFRAMES]
|
|
202
202
|
},
|
|
203
|
-
rangeStart: { name: 'exit', offset: {
|
|
204
|
-
rangeEnd: { name: 'exit', offset: {
|
|
203
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: [EXIT_START] } },
|
|
204
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: [EXIT_END] } },
|
|
205
205
|
easing: '[EASING_FUNCTION]',
|
|
206
206
|
fill: 'both',
|
|
207
207
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
@@ -231,8 +231,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
231
231
|
opacity: 0
|
|
232
232
|
}]
|
|
233
233
|
},
|
|
234
|
-
rangeStart: { name: 'exit', offset: {
|
|
235
|
-
rangeEnd: { name: 'exit', offset: {
|
|
234
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 0 } },
|
|
235
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 100 } },
|
|
236
236
|
easing: 'ease-in',
|
|
237
237
|
fill: 'both'
|
|
238
238
|
}
|
|
@@ -269,8 +269,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
269
269
|
{ [CSS_PROPERTY_1]: '[END_VALUE_1]', [CSS_PROPERTY_2]: '[END_VALUE_2]', [CSS_PROPERTY_3]: '[END_VALUE_3]' }
|
|
270
270
|
]
|
|
271
271
|
},
|
|
272
|
-
rangeStart: { name: '[RANGE_NAME]', offset: {
|
|
273
|
-
rangeEnd: { name: '[RANGE_NAME]', offset: {
|
|
272
|
+
rangeStart: { name: '[RANGE_NAME]', offset: { unit: 'percentage', value: [START_PERCENTAGE] } },
|
|
273
|
+
rangeEnd: { name: '[RANGE_NAME]', offset: { unit: 'percentage', value: [END_PERCENTAGE] } },
|
|
274
274
|
easing: '[EASING_FUNCTION]',
|
|
275
275
|
fill: 'both',
|
|
276
276
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
@@ -304,8 +304,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
304
304
|
{ transform: 'translateY(-200px)', filter: 'brightness(0.8)', opacity: '0.9' }
|
|
305
305
|
]
|
|
306
306
|
},
|
|
307
|
-
rangeStart: { name: 'cover', offset: {
|
|
308
|
-
rangeEnd: { name: 'cover', offset: {
|
|
307
|
+
rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
|
|
308
|
+
rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
|
|
309
309
|
easing: 'linear',
|
|
310
310
|
fill: 'both'
|
|
311
311
|
}
|
|
@@ -329,8 +329,8 @@ 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: 'entry', offset: {
|
|
333
|
-
rangeEnd: { name: 'exit', offset: {
|
|
332
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 0 } },
|
|
333
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 100 } },
|
|
334
334
|
easing: 'linear',
|
|
335
335
|
fill: 'both',
|
|
336
336
|
effectId: 'bg-scroll'
|
|
@@ -368,8 +368,8 @@ These rules help generate scroll-driven interactions using the `@wix/interact` l
|
|
|
368
368
|
{ [CSS_PROPERTY_1]: '[END_VALUE_1]', [CSS_PROPERTY_2]: '[END_VALUE_2]' }
|
|
369
369
|
]
|
|
370
370
|
},
|
|
371
|
-
rangeStart: { name: 'entry', offset: {
|
|
372
|
-
rangeEnd: { name: 'entry', offset: {
|
|
371
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: [ENTRY_START] } },
|
|
372
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: [ENTRY_END] } },
|
|
373
373
|
easing: '[EASING_FUNCTION]',
|
|
374
374
|
fill: 'both',
|
|
375
375
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
@@ -397,8 +397,8 @@ Same as Rule 4, with focus on entry range
|
|
|
397
397
|
{ opacity: '1', transform: 'translateY(0) scale(1)', filter: 'blur(0)' }
|
|
398
398
|
]
|
|
399
399
|
},
|
|
400
|
-
rangeStart: { name: 'entry', offset: {
|
|
401
|
-
rangeEnd: { name: 'entry', offset: {
|
|
400
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 0 } },
|
|
401
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: 70 } },
|
|
402
402
|
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
403
403
|
fill: 'both'
|
|
404
404
|
}
|
|
@@ -422,8 +422,8 @@ Same as Rule 4, with focus on entry range
|
|
|
422
422
|
{ opacity: '1', transform: 'translateX(0)', color: 'rgba(0,0,0,1)' }
|
|
423
423
|
]
|
|
424
424
|
},
|
|
425
|
-
rangeStart: { name: 'entry', offset: {
|
|
426
|
-
rangeEnd: { name: 'entry', offset: {
|
|
425
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 10 } },
|
|
426
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: 60 } },
|
|
427
427
|
easing: 'ease-out',
|
|
428
428
|
fill: 'both',
|
|
429
429
|
effectId: 'heading-reveal'
|
|
@@ -461,8 +461,8 @@ Same as Rule 4, with focus on entry range
|
|
|
461
461
|
{ [CSS_PROPERTY_1]: '[END_VALUE_1]', [CSS_PROPERTY_2]: '[END_VALUE_2]' }
|
|
462
462
|
]
|
|
463
463
|
},
|
|
464
|
-
rangeStart: { name: 'exit', offset: {
|
|
465
|
-
rangeEnd: { name: 'exit', offset: {
|
|
464
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: [EXIT_START] } },
|
|
465
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: [EXIT_END] } },
|
|
466
466
|
easing: '[EASING_FUNCTION]',
|
|
467
467
|
fill: 'both',
|
|
468
468
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
@@ -490,8 +490,8 @@ Same as Rule 4, with focus on exit range
|
|
|
490
490
|
{ opacity: '0', transform: 'translateY(-50px) scale(0.95)', filter: 'blur(3px)' }
|
|
491
491
|
]
|
|
492
492
|
},
|
|
493
|
-
rangeStart: { name: 'exit', offset: {
|
|
494
|
-
rangeEnd: { name: 'exit', offset: {
|
|
493
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 0 } },
|
|
494
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 60 } },
|
|
495
495
|
easing: 'ease-in',
|
|
496
496
|
fill: 'both'
|
|
497
497
|
}
|
|
@@ -515,8 +515,8 @@ Same as Rule 4, with focus on exit range
|
|
|
515
515
|
{ transform: 'translateY(-100%)', opacity: '0.7', backdropFilter: 'blur(0)' }
|
|
516
516
|
]
|
|
517
517
|
},
|
|
518
|
-
rangeStart: { name: 'exit', offset: {
|
|
519
|
-
rangeEnd: { name: 'exit', offset: {
|
|
518
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 20 } },
|
|
519
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 80 } },
|
|
520
520
|
easing: 'ease-in-out',
|
|
521
521
|
fill: 'both',
|
|
522
522
|
effectId: 'nav-hide'
|
|
@@ -551,8 +551,8 @@ Same as Rule 4, with focus on exit range
|
|
|
551
551
|
// progress is 0-1 representing scroll position within range
|
|
552
552
|
[CUSTOM_ANIMATION_LOGIC]
|
|
553
553
|
},
|
|
554
|
-
rangeStart: { name: '[RANGE_NAME]', offset: {
|
|
555
|
-
rangeEnd: { name: '[RANGE_NAME]', offset: {
|
|
554
|
+
rangeStart: { name: '[RANGE_NAME]', offset: { unit: 'percentage', value: [START_PERCENTAGE] } },
|
|
555
|
+
rangeEnd: { name: '[RANGE_NAME]', offset: { unit: 'percentage', value: [END_PERCENTAGE] } },
|
|
556
556
|
fill: 'both',
|
|
557
557
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
558
558
|
}
|
|
@@ -579,8 +579,8 @@ Same as Rule 4, with focus on exit range
|
|
|
579
579
|
element.textContent = `${currentValue}%`;
|
|
580
580
|
element.style.color = `hsl(${progress * 120}, 70%, 50%)`;
|
|
581
581
|
},
|
|
582
|
-
rangeStart: { name: 'cover', offset: {
|
|
583
|
-
rangeEnd: { name: 'cover', offset: {
|
|
582
|
+
rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
|
|
583
|
+
rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
|
|
584
584
|
fill: 'both',
|
|
585
585
|
effectId: 'progress-counter'
|
|
586
586
|
}
|
|
@@ -614,8 +614,8 @@ Same as Rule 4, with focus on exit range
|
|
|
614
614
|
particle.style.opacity = adjustedProgress;
|
|
615
615
|
});
|
|
616
616
|
},
|
|
617
|
-
rangeStart: { name: 'entry', offset: {
|
|
618
|
-
rangeEnd: { name: 'exit', offset: {
|
|
617
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 0 } },
|
|
618
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 100 } },
|
|
619
619
|
fill: 'both',
|
|
620
620
|
effectId: 'particle-scroll'
|
|
621
621
|
}
|
|
@@ -649,8 +649,8 @@ Same as Rule 4, with focus on exit range
|
|
|
649
649
|
// progress is 0-1 representing entry progress
|
|
650
650
|
[ENTRY_ANIMATION_LOGIC]
|
|
651
651
|
},
|
|
652
|
-
rangeStart: { name: 'entry', offset: {
|
|
653
|
-
rangeEnd: { name: 'entry', offset: {
|
|
652
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: [ENTRY_START] } },
|
|
653
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: [ENTRY_END] } },
|
|
654
654
|
fill: 'both',
|
|
655
655
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
656
656
|
}
|
|
@@ -681,8 +681,8 @@ Same as Rule 4, with focus on exit range
|
|
|
681
681
|
element.style.opacity = Math.min(1, progress * 2);
|
|
682
682
|
element.style.transform = `translateY(${(1 - progress) * 30}px)`;
|
|
683
683
|
},
|
|
684
|
-
rangeStart: { name: 'entry', offset: {
|
|
685
|
-
rangeEnd: { name: 'entry', offset: {
|
|
684
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 0 } },
|
|
685
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: 80 } },
|
|
686
686
|
fill: 'both',
|
|
687
687
|
effectId: 'text-reveal'
|
|
688
688
|
}
|
|
@@ -708,8 +708,8 @@ Same as Rule 4, with focus on exit range
|
|
|
708
708
|
element.style.backgroundColor = `rgb(${255 - colorIntensity}, ${colorIntensity}, 100)`;
|
|
709
709
|
element.style.boxShadow = `0 0 ${progress * 20}px rgba(0, ${colorIntensity}, 255, 0.5)`;
|
|
710
710
|
},
|
|
711
|
-
rangeStart: { name: 'entry', offset: {
|
|
712
|
-
rangeEnd: { name: 'entry', offset: {
|
|
711
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 20 } },
|
|
712
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: 90 } },
|
|
713
713
|
fill: 'both',
|
|
714
714
|
effectId: 'chart-fill'
|
|
715
715
|
}
|
|
@@ -743,8 +743,8 @@ Same as Rule 4, with focus on exit range
|
|
|
743
743
|
// progress is 0-1 representing exit progress
|
|
744
744
|
[EXIT_ANIMATION_LOGIC]
|
|
745
745
|
},
|
|
746
|
-
rangeStart: { name: 'exit', offset: {
|
|
747
|
-
rangeEnd: { name: 'exit', offset: {
|
|
746
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: [EXIT_START] } },
|
|
747
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: [EXIT_END] } },
|
|
748
748
|
fill: 'both',
|
|
749
749
|
effectId: '[UNIQUE_EFFECT_ID]'
|
|
750
750
|
}
|
|
@@ -782,8 +782,8 @@ Same as Rule 4, with focus on exit range
|
|
|
782
782
|
`;
|
|
783
783
|
});
|
|
784
784
|
},
|
|
785
|
-
rangeStart: { name: 'exit', offset: {
|
|
786
|
-
rangeEnd: { name: 'exit', offset: {
|
|
785
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 10 } },
|
|
786
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 90 } },
|
|
787
787
|
fill: 'both',
|
|
788
788
|
effectId: 'dissolve-exit'
|
|
789
789
|
}
|
|
@@ -817,8 +817,8 @@ Same as Rule 4, with focus on exit range
|
|
|
817
817
|
element.style.opacity = opacity;
|
|
818
818
|
element.style.filter = `blur(${adjustedProgress * 10}px)`;
|
|
819
819
|
},
|
|
820
|
-
rangeStart: { name: 'exit', offset: {
|
|
821
|
-
rangeEnd: { name: 'exit', offset: {
|
|
820
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 0 } },
|
|
821
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 80 } },
|
|
822
822
|
fill: 'both',
|
|
823
823
|
effectId: 'data-exit'
|
|
824
824
|
}
|
|
@@ -849,8 +849,8 @@ Combining different ranges for complex scroll animations:
|
|
|
849
849
|
{ opacity: '1', transform: 'translateY(0)' }
|
|
850
850
|
]
|
|
851
851
|
},
|
|
852
|
-
rangeStart: { name: 'entry', offset: {
|
|
853
|
-
rangeEnd: { name: 'entry', offset: {
|
|
852
|
+
rangeStart: { name: 'entry', offset: { unit: 'percentage', value: 0 } },
|
|
853
|
+
rangeEnd: { name: 'entry', offset: { unit: 'percentage', value: 50 } },
|
|
854
854
|
easing: 'ease-out',
|
|
855
855
|
fill: 'backwards'
|
|
856
856
|
},
|
|
@@ -864,8 +864,8 @@ Combining different ranges for complex scroll animations:
|
|
|
864
864
|
{ transform: 'translateY(-100px)', filter: 'hue-rotate(180deg)' }
|
|
865
865
|
]
|
|
866
866
|
},
|
|
867
|
-
rangeStart: { name: 'cover', offset: {
|
|
868
|
-
rangeEnd: { name: 'cover', offset: {
|
|
867
|
+
rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
|
|
868
|
+
rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
|
|
869
869
|
easing: 'linear',
|
|
870
870
|
fill: 'both'
|
|
871
871
|
},
|
|
@@ -879,8 +879,8 @@ Combining different ranges for complex scroll animations:
|
|
|
879
879
|
{ opacity: '0', transform: 'scale(0.8)' }
|
|
880
880
|
]
|
|
881
881
|
},
|
|
882
|
-
rangeStart: { name: 'exit', offset: {
|
|
883
|
-
rangeEnd: { name: 'exit', offset: {
|
|
882
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 50 } },
|
|
883
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 100 } },
|
|
884
884
|
easing: 'ease-in',
|
|
885
885
|
fill: 'forwards'
|
|
886
886
|
}
|
|
@@ -907,8 +907,8 @@ Responsive scroll animations:
|
|
|
907
907
|
{ transform: 'translateY(-300px)' }
|
|
908
908
|
]
|
|
909
909
|
},
|
|
910
|
-
rangeStart: { name: 'cover', offset: {
|
|
911
|
-
rangeEnd: { name: 'cover', offset: {
|
|
910
|
+
rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
|
|
911
|
+
rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
|
|
912
912
|
easing: 'linear',
|
|
913
913
|
fill: 'both'
|
|
914
914
|
}
|
|
@@ -929,8 +929,8 @@ Responsive scroll animations:
|
|
|
929
929
|
{ opacity: '0.7' }
|
|
930
930
|
]
|
|
931
931
|
},
|
|
932
|
-
rangeStart: { name: 'exit', offset: {
|
|
933
|
-
rangeEnd: { name: 'exit', offset: {
|
|
932
|
+
rangeStart: { name: 'exit', offset: { unit: 'percentage', value: 0 } },
|
|
933
|
+
rangeEnd: { name: 'exit', offset: { unit: 'percentage', value: 100 } },
|
|
934
934
|
easing: 'linear',
|
|
935
935
|
fill: 'both'
|
|
936
936
|
}
|
|
@@ -956,8 +956,8 @@ Orchestrating multiple elements with viewProgress:
|
|
|
956
956
|
{ transform: 'translateY(-50px)' }
|
|
957
957
|
]
|
|
958
958
|
},
|
|
959
|
-
rangeStart: { name: 'cover', offset: {
|
|
960
|
-
rangeEnd: { name: 'cover', offset: {
|
|
959
|
+
rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
|
|
960
|
+
rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
|
|
961
961
|
easing: 'linear',
|
|
962
962
|
fill: 'both'
|
|
963
963
|
},
|
|
@@ -970,8 +970,8 @@ Orchestrating multiple elements with viewProgress:
|
|
|
970
970
|
{ transform: 'translateY(-100px)' }
|
|
971
971
|
]
|
|
972
972
|
},
|
|
973
|
-
rangeStart: { name: 'cover', offset: {
|
|
974
|
-
rangeEnd: { name: 'cover', offset: {
|
|
973
|
+
rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
|
|
974
|
+
rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
|
|
975
975
|
easing: 'linear',
|
|
976
976
|
fill: 'both'
|
|
977
977
|
},
|
|
@@ -984,8 +984,8 @@ Orchestrating multiple elements with viewProgress:
|
|
|
984
984
|
{ transform: 'translateY(-150px)' }
|
|
985
985
|
]
|
|
986
986
|
},
|
|
987
|
-
rangeStart: { name: 'cover', offset: {
|
|
988
|
-
rangeEnd: { name: 'cover', offset: {
|
|
987
|
+
rangeStart: { name: 'cover', offset: { unit: 'percentage', value: 0 } },
|
|
988
|
+
rangeEnd: { name: 'cover', offset: { unit: 'percentage', value: 100 } },
|
|
989
989
|
easing: 'linear',
|
|
990
990
|
fill: 'both'
|
|
991
991
|
}
|