@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -0,0 +1,89 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('ArcScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        transform: 'perspective(500px) translateZ(-300px)  rotateY(-68deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(500px) translateZ(-300px) rotateY(0deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ArcScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('vertical direction', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'vertical' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(500px) translateZ(-300px)  rotateX(-68deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(500px) translateZ(-300px) rotateX(0deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ArcScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(500px) translateZ(-300px)  rotateY(0deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(500px) translateZ(-300px) rotateY(68deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ArcScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            fill: 'forwards',
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        transform: 'perspective(500px) translateZ(-300px)  rotateY(-68deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(500px) translateZ(-300px) rotateY(68deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ArcScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

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

@@ -0,0 +1,149 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BlurScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                keyframes: [
+                    {
+                        filter: 'blur(6px)',
+                    },
+                    {
+                        filter: 'blur(0px)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.BlurScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom blur value', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { blur: 10 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        filter: 'blur(10px)',
+                    },
+                    {
+                        filter: 'blur(0px)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.BlurScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        filter: 'blur(6px)',
+                    },
+                    {
+                        filter: 'blur(0px)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.BlurScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - medium', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        filter: 'blur(25px)',
+                    },
+                    {
+                        filter: 'blur(0px)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.BlurScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - hard', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        filter: 'blur(50px)',
+                    },
+                    {
+                        filter: 'blur(0px)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.BlurScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        filter: 'blur(0px)',
+                    },
+                    {
+                        filter: 'blur(6px)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.BlurScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            fill: 'both',
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                fill: 'both',
+                keyframes: [
+                    {
+                        filter: 'blur(6px)',
+                    },
+                    {
+                        filter: 'blur(0px)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.BlurScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

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

@@ -0,0 +1,90 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('FadeScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        opacity: 0,
+                    },
+                    {
+                        opacity: 'var(--comp-opacity, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FadeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom opacity', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { opacity: 0.5 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        opacity: 0.5,
+                    },
+                    {
+                        opacity: 'var(--comp-opacity, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FadeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        opacity: 'var(--comp-opacity, 1)',
+                    },
+                    {
+                        opacity: 0,
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FadeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            fill: 'both',
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                fill: 'both',
+                keyframes: [
+                    {
+                        opacity: 0,
+                    },
+                    {
+                        opacity: `var(--comp-opacity, 1)`,
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FadeScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

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

@@ -0,0 +1,167 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('FlipScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(800px) rotateY(-240deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(800px) rotateY(240deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FlipScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom rotate value', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { rotate: 180 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(800px) rotateY(-180deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(800px) rotateY(180deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FlipScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - vertical', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'vertical' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(800px) rotateX(-240deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(800px) rotateX(240deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FlipScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(800px) rotateY(-60deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(800px) rotateY(60deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FlipScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - medium', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(800px) rotateY(-120deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(800px) rotateY(120deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FlipScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - hard', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(800px) rotateY(-420deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(800px) rotateY(420deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FlipScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - in', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'in' },
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                keyframes: [
+                    {
+                        transform: 'perspective(800px) rotateY(-240deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(800px) rotateY(0deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FlipScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        transform: 'perspective(800px) rotateY(0deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                    {
+                        transform: 'perspective(800px) rotateY(240deg) rotate(var(--comp-rotate-z, 0deg))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.FlipScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});