@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -0,0 +1,188 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('SpinScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + -54deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom spins', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { spins: 0.5 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + -180deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom scale', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { scale: 0.5 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'scale(0.5) rotate(calc(var(--comp-rotate-z, 0deg) + -54deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - counter-clockwise', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'counter-clockwise' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 54deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + -54deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - medium', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'scale(0.7) rotate(calc(var(--comp-rotate-z, 0deg) + -54deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - hard', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'scale(0.4) rotate(calc(var(--comp-rotate-z, 0deg) + -54deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 54deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + -27deg))',
+                    },
+                    {
+                        transform: 'scale(1) rotate(calc(var(--comp-rotate-z, 0deg) + 27deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SpinScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

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

@@ -0,0 +1,235 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('StretchScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                easing: 'backInOut',
+                keyframes: [
+                    {
+                        scale: '1 1',
+                        translate: '0 0',
+                    },
+                    {
+                        scale: '0.4 1.6',
+                        translate: '0 -60.00000000000001%',
+                    },
+                ],
+            },
+            {
+                fill: 'forwards',
+                easing: 'backInOut',
+                keyframes: [
+                    {
+                        opacity: 1,
+                        offset: 0.35,
+                    },
+                    {
+                        opacity: 0,
+                        offset: 1,
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.StretchScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        scale: '1 1',
+                        translate: '0 0',
+                    },
+                    {
+                        scale: '0.8 1.2',
+                        translate: '0 -19.999999999999996%',
+                    },
+                ],
+            },
+            {},
+        ];
+        const result = scrollAnimations?.StretchScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - medium', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        scale: '1 1',
+                        translate: '0 0',
+                    },
+                    {
+                        scale: '0.6 1.5',
+                        translate: '0 -50%',
+                    },
+                ],
+            },
+            {},
+        ];
+        const result = scrollAnimations?.StretchScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - hard', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        scale: '1 1',
+                        translate: '0 0',
+                    },
+                    {
+                        scale: '0.4 2',
+                        translate: '0 -100%',
+                    },
+                ],
+            },
+            {},
+        ];
+        const result = scrollAnimations?.StretchScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom stretch value', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { stretch: 0.8 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        scale: '1 1',
+                        translate: '0 0',
+                    },
+                    {
+                        scale: '0.19999999999999996 1.8',
+                        translate: '0 -80%',
+                    },
+                ],
+            },
+            {
+                keyframes: [
+                    {
+                        opacity: 1,
+                        offset: 0.35,
+                    },
+                    {
+                        opacity: 0,
+                        offset: 1,
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.StretchScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - in', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'in' },
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                keyframes: [
+                    {
+                        scale: '0.4 1.6',
+                        translate: '0 60.00000000000001%',
+                    },
+                    {
+                        scale: '1 1',
+                        translate: '0 0',
+                    },
+                ],
+            },
+            {
+                fill: 'backwards',
+                keyframes: [
+                    {
+                        opacity: 0,
+                        offset: 0,
+                    },
+                    {
+                        opacity: 1,
+                        offset: 0.65,
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.StretchScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            fill: 'both',
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                fill: 'both',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        scale: '0.4 1.6',
+                        translate: '0 60.00000000000001%',
+                        easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+                    },
+                    {
+                        scale: '1 1',
+                        translate: '0 0',
+                        easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+                    },
+                    {
+                        scale: '0.4 1.6',
+                        translate: '0 -60.00000000000001%',
+                    },
+                ],
+            },
+            {
+                fill: 'both',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        opacity: 0,
+                        offset: 0,
+                    },
+                    {
+                        opacity: 1,
+                        offset: 0.325,
+                    },
+                    {
+                        opacity: 1,
+                        offset: 0.7,
+                    },
+                    {
+                        opacity: 0,
+                        offset: 1,
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.StretchScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

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

@@ -0,0 +1,206 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('TiltScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(-10deg) rotateY(-25deg)',
+                    },
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(0deg) rotateY(0deg)',
+                    },
+                ],
+            },
+            {
+                fill: 'backwards',
+                easing: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0px',
+                composite: 'add',
+                keyframes: [
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + 25deg))',
+                    },
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.TiltScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(-10deg) rotateY(-25deg)',
+                    },
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(0deg) rotateY(0deg)',
+                    },
+                ],
+            },
+            {
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + 25deg))',
+                    },
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.TiltScroll?.(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: 'perspective(400px) translateY(0vh) rotateX(0deg) rotateY(0deg)',
+                    },
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(-10deg) rotateY(-25deg)',
+                    },
+                ],
+            },
+            {
+                fill: 'forwards',
+                startOffsetAdd: '0px',
+                endOffsetAdd: '0vh',
+                keyframes: [
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + 25deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.TiltScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            fill: 'both',
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                fill: 'both',
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0vh',
+                keyframes: [
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(-10deg) rotateY(-25deg)',
+                    },
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(10deg) rotateY(12.5deg)',
+                    },
+                ],
+            },
+            {
+                fill: 'both',
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0vh',
+                keyframes: [
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + -25deg))',
+                    },
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + 31.25deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.TiltScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - left', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'left' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(-10deg) rotateY(-25deg)',
+                    },
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(0deg) rotateY(0deg)',
+                    },
+                ],
+            },
+            {
+                keyframes: [
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + -25deg))',
+                    },
+                    {
+                        transform: 'rotate(calc(var(--comp-rotate-z, 0deg) + 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.TiltScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom distance', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { distance: 0.5 },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '-20vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'perspective(400px) translateY(20vh) rotateX(-10deg) rotateY(-25deg)',
+                    },
+                    {
+                        transform: 'perspective(400px) translateY(0vh) rotateX(0deg) rotateY(0deg)',
+                    },
+                ],
+            },
+            {
+                startOffsetAdd: '-20vh',
+                endOffsetAdd: '0px',
+            },
+        ];
+        const result = scrollAnimations?.TiltScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});