@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/scroll/test/RevealScroll.spec.js

@@ -0,0 +1,131 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('RevealScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-from, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%))',
+                    },
+                    {
+                        clipPath: 'var(--motion-clip-to, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.RevealScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - left', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'left' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-from, polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%))',
+                    },
+                    {
+                        clipPath: 'var(--motion-clip-to, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.RevealScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - right', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'right' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-from, polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%))',
+                    },
+                    {
+                        clipPath: 'var(--motion-clip-to, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.RevealScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - top', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'top' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-from, polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%))',
+                    },
+                    {
+                        clipPath: 'var(--motion-clip-to, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.RevealScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-from, polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))',
+                    },
+                    {
+                        clipPath: 'var(--motion-clip-to, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.RevealScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-from, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%))',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                    },
+                    {
+                        clipPath: 'var(--motion-clip-to, polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.RevealScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/scroll/test/ShapeScroll.spec.js

@@ -0,0 +1,234 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('ShapeScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        clipPath: 'circle(50%)',
+                        easing: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
+                    },
+                    {
+                        clipPath: 'circle(75%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom shape - diamond', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { shape: 'diamond' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'polygon(50% 25%, 75% 50%, 50% 75%, 25% 50%)',
+                    },
+                    {
+                        clipPath: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom shape - ellipse', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { shape: 'ellipse' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'ellipse(25% 25%)',
+                    },
+                    {
+                        clipPath: 'ellipse(75% 75%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom shape - window', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { shape: 'window' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'inset(25% round 50% 50% 0% 0%)',
+                    },
+                    {
+                        clipPath: 'inset(-20% round 50% 50% 0% 0%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom shape - rectangle', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { shape: 'rectangle' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'inset(50%)',
+                    },
+                    {
+                        clipPath: 'inset(0%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'circle(40%)',
+                    },
+                    {
+                        clipPath: 'circle(75%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - medium', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'circle(25%)',
+                    },
+                    {
+                        clipPath: 'circle(75%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - hard', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'circle(0%)',
+                    },
+                    {
+                        clipPath: 'circle(75%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom intensity', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { intensity: 0.75 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'circle(25%)',
+                    },
+                    {
+                        clipPath: 'circle(75%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        clipPath: 'circle(75%)',
+                    },
+                    {
+                        clipPath: 'circle(50%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            fill: 'both',
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                fill: 'both',
+                keyframes: [
+                    {
+                        clipPath: 'circle(50%)',
+                    },
+                    {
+                        clipPath: 'circle(75%)',
+                    },
+                    {
+                        clipPath: 'circle(50%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShapeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/scroll/test/ShrinkScroll.spec.js

@@ -0,0 +1,180 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('ShrinkScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1.2) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShrinkScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1.2) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShrinkScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - medium', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '-0.5vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'translateY(-20vh) translate(0%, 0%) scale(1.7) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShrinkScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - hard', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '-1vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'translateY(-40vh) translate(0%, 0%) scale(3.5) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShrinkScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                startOffsetAdd: '0px',
+                endOffsetAdd: '0vh',
+                keyframes: [
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(0.8) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShrinkScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - top-right', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'top-right' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'translateY(0vh) translate(50%, -50%) scale(1.2) translate(-50%, 50%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateY(0vh) translate(50%, -50%) scale(1) translate(-50%, 50%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShrinkScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom scale', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { scale: 1.5 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1.5) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShrinkScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom speed', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { speed: 0.5 },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '-20vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'translateY(-20vh) translate(0%, 0%) scale(1.2) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateY(0vh) translate(0%, 0%) scale(1) translate(0%, 0%) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShrinkScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});