npm - @wix/motion - Versions diffs - 1.659.0 → 2.0.0-rc.2 - Mend

@wix/motion 1.659.0 → 2.0.0-rc.2

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 (930) hide show

package/dist/es/library/scroll/test/ShuttersScroll.spec.js ADDED Viewed

@@ -0,0 +1,189 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('ShuttersScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 8% 0%, 8% 100%, 8% 100%, 8% 0%, 16% 0%, 16% 100%, 16% 100%, 16% 0%, 25% 0%, 25% 100%, 25% 100%, 25% 0%, 33% 0%, 33% 100%, 33% 100%, 33% 0%, 41% 0%, 41% 100%, 41% 100%, 41% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 0%, 58% 0%, 58% 100%, 58% 100%, 58% 0%, 66% 0%, 66% 100%, 66% 100%, 66% 0%, 75% 0%, 75% 100%, 75% 100%, 75% 0%, 83% 0%, 83% 100%, 83% 100%, 83% 0%, 91% 0%, 91% 100%, 91% 100%, 91% 0%)',
+                        easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 8% 100%, 8% 0%, 8% 0%, 8% 100%, 18% 100%, 18% 0%, 16% 0%, 16% 100%, 29% 100%, 29% 0%, 25% 0%, 25% 100%, 41% 100%, 41% 0%, 33% 0%, 33% 100%, 55% 100%, 55% 0%, 41% 0%, 41% 100%, 70% 100%, 70% 0%, 50% 0%, 50% 100%, 87% 100%, 87% 0%, 58% 0%, 58% 100%, 105% 100%, 105% 0%, 66% 0%, 66% 100%, 124% 100%, 124% 0%, 75% 0%, 75% 100%, 145% 100%, 145% 0%, 83% 0%, 83% 100%, 168% 100%, 168% 0%, 91% 0%, 91% 100%, 191% 100%, 191% 0%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShuttersScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - left', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'left' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%, 91% 0%, 91% 100%, 91% 100%, 91% 0%, 83% 0%, 83% 100%, 83% 100%, 83% 0%, 75% 0%, 75% 100%, 75% 100%, 75% 0%, 66% 0%, 66% 100%, 66% 100%, 66% 0%, 58% 0%, 58% 100%, 58% 100%, 58% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 0%, 41% 0%, 41% 100%, 41% 100%, 41% 0%, 33% 0%, 33% 100%, 33% 100%, 33% 0%, 25% 0%, 25% 100%, 25% 100%, 25% 0%, 16% 0%, 16% 100%, 16% 100%, 16% 0%, 8% 0%, 8% 100%, 8% 100%, 8% 0%)',
+                    },
+                    {
+                        clipPath: 'polygon(100% 0%, 100% 100%, 91% 100%, 91% 0%, 91% 0%, 91% 100%, 81% 100%, 81% 0%, 83% 0%, 83% 100%, 70% 100%, 70% 0%, 75% 0%, 75% 100%, 58% 100%, 58% 0%, 66% 0%, 66% 100%, 44% 100%, 44% 0%, 58% 0%, 58% 100%, 29% 100%, 29% 0%, 50% 0%, 50% 100%, 12% 100%, 12% 0%, 41% 0%, 41% 100%, -5% 100%, -5% 0%, 33% 0%, 33% 100%, -24% 100%, -24% 0%, 25% 0%, 25% 100%, -45% 100%, -45% 0%, 16% 0%, 16% 100%, -68% 100%, -68% 0%, 8% 0%, 8% 100%, -91% 100%, -91% 0%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShuttersScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - top', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'top' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%, 0% 91%, 100% 91%, 100% 91%, 0% 91%, 0% 83%, 100% 83%, 100% 83%, 0% 83%, 0% 75%, 100% 75%, 100% 75%, 0% 75%, 0% 66%, 100% 66%, 100% 66%, 0% 66%, 0% 58%, 100% 58%, 100% 58%, 0% 58%, 0% 50%, 100% 50%, 100% 50%, 0% 50%, 0% 41%, 100% 41%, 100% 41%, 0% 41%, 0% 33%, 100% 33%, 100% 33%, 0% 33%, 0% 25%, 100% 25%, 100% 25%, 0% 25%, 0% 16%, 100% 16%, 100% 16%, 0% 16%, 0% 8%, 100% 8%, 100% 8%, 0% 8%)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 100%, 100% 100%, 100% 91%, 0% 91%, 0% 91%, 100% 91%, 100% 81%, 0% 81%, 0% 83%, 100% 83%, 100% 70%, 0% 70%, 0% 75%, 100% 75%, 100% 58%, 0% 58%, 0% 66%, 100% 66%, 100% 44%, 0% 44%, 0% 58%, 100% 58%, 100% 29%, 0% 29%, 0% 50%, 100% 50%, 100% 12%, 0% 12%, 0% 41%, 100% 41%, 100% -5%, 0% -5%, 0% 33%, 100% 33%, 100% -24%, 0% -24%, 0% 25%, 100% 25%, 100% -45%, 0% -45%, 0% 16%, 100% 16%, 100% -68%, 0% -68%, 0% 8%, 100% 8%, 100% -91%, 0% -91%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShuttersScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - bottom', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'bottom' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%, 0% 8%, 100% 8%, 100% 8%, 0% 8%, 0% 16%, 100% 16%, 100% 16%, 0% 16%, 0% 25%, 100% 25%, 100% 25%, 0% 25%, 0% 33%, 100% 33%, 100% 33%, 0% 33%, 0% 41%, 100% 41%, 100% 41%, 0% 41%, 0% 50%, 100% 50%, 100% 50%, 0% 50%, 0% 58%, 100% 58%, 100% 58%, 0% 58%, 0% 66%, 100% 66%, 100% 66%, 0% 66%, 0% 75%, 100% 75%, 100% 75%, 0% 75%, 0% 83%, 100% 83%, 100% 83%, 0% 83%, 0% 91%, 100% 91%, 100% 91%, 0% 91%)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 8%, 0% 8%, 0% 8%, 100% 8%, 100% 18%, 0% 18%, 0% 16%, 100% 16%, 100% 29%, 0% 29%, 0% 25%, 100% 25%, 100% 41%, 0% 41%, 0% 33%, 100% 33%, 100% 55%, 0% 55%, 0% 41%, 100% 41%, 100% 70%, 0% 70%, 0% 50%, 100% 50%, 100% 87%, 0% 87%, 0% 58%, 100% 58%, 100% 105%, 0% 105%, 0% 66%, 100% 66%, 100% 124%, 0% 124%, 0% 75%, 100% 75%, 100% 145%, 0% 145%, 0% 83%, 100% 83%, 100% 168%, 0% 168%, 0% 91%, 100% 91%, 100% 191%, 0% 191%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShuttersScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom shutters', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { shutters: 6 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 16% 0%, 16% 100%, 16% 100%, 16% 0%, 33% 0%, 33% 100%, 33% 100%, 33% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 0%, 66% 0%, 66% 100%, 66% 100%, 66% 0%, 83% 0%, 83% 100%, 83% 100%, 83% 0%)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 16% 100%, 16% 0%, 16% 0%, 16% 100%, 38% 100%, 38% 0%, 33% 0%, 33% 100%, 66% 100%, 66% 0%, 50% 0%, 50% 100%, 99% 100%, 99% 0%, 66% 0%, 66% 100%, 138% 100%, 138% 0%, 83% 0%, 83% 100%, 183% 100%, 183% 0%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShuttersScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('staggered false', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { staggered: false },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 8% 0%, 8% 100%, 8% 100%, 8% 0%, 16% 0%, 16% 100%, 16% 100%, 16% 0%, 25% 0%, 25% 100%, 25% 100%, 25% 0%, 33% 0%, 33% 100%, 33% 100%, 33% 0%, 41% 0%, 41% 100%, 41% 100%, 41% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 0%, 58% 0%, 58% 100%, 58% 100%, 58% 0%, 66% 0%, 66% 100%, 66% 100%, 66% 0%, 75% 0%, 75% 100%, 75% 100%, 75% 0%, 83% 0%, 83% 100%, 83% 100%, 83% 0%, 91% 0%, 91% 100%, 91% 100%, 91% 0%)',
+                        easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 8% 100%, 8% 0%, 8% 0%, 8% 100%, 16% 100%, 16% 0%, 16% 0%, 16% 100%, 25% 100%, 25% 0%, 25% 0%, 25% 100%, 33% 100%, 33% 0%, 33% 0%, 33% 100%, 41% 100%, 41% 0%, 41% 0%, 41% 100%, 50% 100%, 50% 0%, 50% 0%, 50% 100%, 58% 100%, 58% 0%, 58% 0%, 58% 100%, 66% 100%, 66% 0%, 66% 0%, 66% 100%, 75% 100%, 75% 0%, 75% 0%, 75% 100%, 83% 100%, 83% 0%, 83% 0%, 83% 100%, 91% 100%, 91% 0%, 91% 0%, 91% 100%, 100% 100%, 100% 0%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShuttersScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        clipPath: 'polygon(100% 0%, 100% 100%, 91% 100%, 91% 0%, 91% 0%, 91% 100%, 81% 100%, 81% 0%, 83% 0%, 83% 100%, 70% 100%, 70% 0%, 75% 0%, 75% 100%, 58% 100%, 58% 0%, 66% 0%, 66% 100%, 44% 100%, 44% 0%, 58% 0%, 58% 100%, 29% 100%, 29% 0%, 50% 0%, 50% 100%, 12% 100%, 12% 0%, 41% 0%, 41% 100%, -5% 100%, -5% 0%, 33% 0%, 33% 100%, -24% 100%, -24% 0%, 25% 0%, 25% 100%, -45% 100%, -45% 0%, 16% 0%, 16% 100%, -68% 100%, -68% 0%, 8% 0%, 8% 100%, -91% 100%, -91% 0%)',
+                        easing: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+                    },
+                    {
+                        clipPath: 'polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%, 91% 0%, 91% 100%, 91% 100%, 91% 0%, 83% 0%, 83% 100%, 83% 100%, 83% 0%, 75% 0%, 75% 100%, 75% 100%, 75% 0%, 66% 0%, 66% 100%, 66% 100%, 66% 0%, 58% 0%, 58% 100%, 58% 100%, 58% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 0%, 41% 0%, 41% 100%, 41% 100%, 41% 0%, 33% 0%, 33% 100%, 33% 100%, 33% 0%, 25% 0%, 25% 100%, 25% 100%, 25% 0%, 16% 0%, 16% 100%, 16% 100%, 16% 0%, 8% 0%, 8% 100%, 8% 100%, 8% 0%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShuttersScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            fill: 'both',
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                fill: 'both',
+                keyframes: [
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 8% 0%, 8% 100%, 8% 100%, 8% 0%, 16% 0%, 16% 100%, 16% 100%, 16% 0%, 25% 0%, 25% 100%, 25% 100%, 25% 0%, 33% 0%, 33% 100%, 33% 100%, 33% 0%, 41% 0%, 41% 100%, 41% 100%, 41% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 0%, 58% 0%, 58% 100%, 58% 100%, 58% 0%, 66% 0%, 66% 100%, 66% 100%, 66% 0%, 75% 0%, 75% 100%, 75% 100%, 75% 0%, 83% 0%, 83% 100%, 83% 100%, 83% 0%, 91% 0%, 91% 100%, 91% 100%, 91% 0%)',
+                        easing: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 8% 100%, 8% 0%, 8% 0%, 8% 100%, 18% 100%, 18% 0%, 16% 0%, 16% 100%, 29% 100%, 29% 0%, 25% 0%, 25% 100%, 41% 100%, 41% 0%, 33% 0%, 33% 100%, 55% 100%, 55% 0%, 41% 0%, 41% 100%, 70% 100%, 70% 0%, 50% 0%, 50% 100%, 87% 100%, 87% 0%, 58% 0%, 58% 100%, 105% 100%, 105% 0%, 66% 0%, 66% 100%, 124% 100%, 124% 0%, 75% 0%, 75% 100%, 145% 100%, 145% 0%, 83% 0%, 83% 100%, 168% 100%, 168% 0%, 91% 0%, 91% 100%, 191% 100%, 191% 0%)',
+                        easing: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+                        offset: 0.45,
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 0% 100%, 8% 100%, 8% 0%, 8% 0%, 8% 100%, 18% 100%, 18% 0%, 16% 0%, 16% 100%, 29% 100%, 29% 0%, 25% 0%, 25% 100%, 41% 100%, 41% 0%, 33% 0%, 33% 100%, 55% 100%, 55% 0%, 41% 0%, 41% 100%, 70% 100%, 70% 0%, 50% 0%, 50% 100%, 87% 100%, 87% 0%, 58% 0%, 58% 100%, 105% 100%, 105% 0%, 66% 0%, 66% 100%, 124% 100%, 124% 0%, 75% 0%, 75% 100%, 145% 100%, 145% 0%, 83% 0%, 83% 100%, 168% 100%, 168% 0%, 91% 0%, 91% 100%, 191% 100%, 191% 0%)',
+                        easing: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+                        offset: 0.55,
+                    },
+                    {
+                        clipPath: 'polygon(8% 0%, 8% 100%, -91% 100%, -91% 0%, 16% 0%, 16% 100%, -68% 100%, -68% 0%, 25% 0%, 25% 100%, -45% 100%, -45% 0%, 33% 0%, 33% 100%, -24% 100%, -24% 0%, 41% 0%, 41% 100%, -5% 100%, -5% 0%, 50% 0%, 50% 100%, 12% 100%, 12% 0%, 58% 0%, 58% 100%, 29% 100%, 29% 0%, 66% 0%, 66% 100%, 44% 100%, 44% 0%, 75% 0%, 75% 100%, 58% 100%, 58% 0%, 83% 0%, 83% 100%, 70% 100%, 70% 0%, 91% 0%, 91% 100%, 81% 100%, 81% 0%, 100% 0%, 100% 100%, 91% 100%, 91% 0%)',
+                        easing: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+                        offset: 0.55,
+                    },
+                    {
+                        clipPath: 'polygon(8% 0%, 8% 100%, 8% 100%, 8% 0%, 16% 0%, 16% 100%, 16% 100%, 16% 0%, 25% 0%, 25% 100%, 25% 100%, 25% 0%, 33% 0%, 33% 100%, 33% 100%, 33% 0%, 41% 0%, 41% 100%, 41% 100%, 41% 0%, 50% 0%, 50% 100%, 50% 100%, 50% 0%, 58% 0%, 58% 100%, 58% 100%, 58% 0%, 66% 0%, 66% 100%, 66% 100%, 66% 0%, 75% 0%, 75% 100%, 75% 100%, 75% 0%, 83% 0%, 83% 100%, 83% 100%, 83% 0%, 91% 0%, 91% 100%, 91% 100%, 91% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 0%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.ShuttersScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/scroll/test/SkewPanScroll.spec.js ADDED Viewed

@@ -0,0 +1,168 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('SkewPanScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                keyframes: [
+                    {
+                        transform: 'translateX(calc(100vw - var(--motion-left, 0px))) skewX(-10deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateX(0) skewX(0deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SkewPanScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom skew value', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { skew: 20 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'translateX(calc(100vw - var(--motion-left, 0px))) skewX(-20deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateX(0) skewX(0deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SkewPanScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - left', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'left' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'translateX(calc(var(--motion-left, calc(100vw - 100%)) * -1 - 100%)) skewX(10deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateX(0) skewX(0deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SkewPanScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'translateX(calc(100vw - var(--motion-left, 0px))) skewX(-10deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateX(0) skewX(0deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SkewPanScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - medium', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'translateX(calc(100vw - var(--motion-left, 0px))) skewX(-17deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateX(0) skewX(0deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SkewPanScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - hard', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'translateX(calc(100vw - var(--motion-left, 0px))) skewX(-24deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateX(0) skewX(0deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SkewPanScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        transform: 'translateX(0) skewX(0deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateX(calc(100vw - var(--motion-left, 0px))) skewX(10deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SkewPanScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - continuous', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'continuous' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'translateX(calc(100vw - var(--motion-left, 0px))) skewX(-10deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                    {
+                        transform: 'translateX(calc(var(--motion-left, calc(100vw - 100%)) * -1 - 100%)) skewX(10deg) rotate(var(--comp-rotate-z, 0))',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SkewPanScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/scroll/test/SlideScroll.spec.js ADDED Viewed

@@ -0,0 +1,99 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('SlideScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-from, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%))',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(0, 100%)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(0, 0)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SlideScroll?.(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%))',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(-100%, 0)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(0, 0)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SlideScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                fill: 'forwards',
+                keyframes: [
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(0, 0)',
+                    },
+                    {
+                        clipPath: 'var(--motion-clip-from, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%))',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(0, 100%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SlideScroll?.(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%))',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(0, 100%)',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(0, 0)',
+                    },
+                    {
+                        clipPath: 'var(--motion-clip-to, polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%))',
+                        transform: 'rotate(var(--comp-rotate-z, 0)) translate(0, -100%)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.SlideScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/scroll/test/Spin3dScroll.spec.js ADDED Viewed

@@ -0,0 +1,184 @@
+import { describe, expect, test } from 'vitest';
+import { scrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('Spin3dScroll', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                fill: 'backwards',
+                easing: 'linear',
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 100deg)) rotateY(100deg) rotateX(200deg)',
+                    },
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 0deg)) rotateY(0deg) rotateX(0deg)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.Spin3dScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom rotate value', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { rotate: -50 },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 50deg)) rotateY(50deg) rotateX(100deg)',
+                    },
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 0deg)) rotateY(0deg) rotateX(0deg)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.Spin3dScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '0vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + -45deg)) rotateY(-45deg) rotateX(-90deg)',
+                    },
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 0deg)) rotateY(0deg) rotateX(0deg)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.Spin3dScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - medium', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '-20vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'perspective(1000px) translateY(-20vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + -100deg)) rotateY(-100deg) rotateX(-200deg)',
+                    },
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 0deg)) rotateY(0deg) rotateX(0deg)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.Spin3dScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - hard', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '-40vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'perspective(1000px) translateY(-40vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + -200deg)) rotateY(-200deg) rotateX(-400deg)',
+                    },
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 0deg)) rotateY(0deg) rotateX(0deg)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.Spin3dScroll?.(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(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 0deg)) rotateY(0deg) rotateX(0deg)',
+                    },
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + -100deg)) rotateY(-200deg) rotateX(-300deg)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.Spin3dScroll?.(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(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 100deg)) rotateY(100deg) rotateX(200deg)',
+                    },
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + -200deg)) rotateY(-100deg) rotateX(-180deg)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.Spin3dScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom speed', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { speed: 0.5 },
+        };
+        const expectedResult = [
+            {
+                startOffsetAdd: '-20vh',
+                endOffsetAdd: '0px',
+                keyframes: [
+                    {
+                        transform: 'perspective(1000px) translateY(-20vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 100deg)) rotateY(100deg) rotateX(200deg)',
+                    },
+                    {
+                        transform: 'perspective(1000px) translateY(0vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + 0deg)) rotateY(0deg) rotateX(0deg)',
+                    },
+                ],
+            },
+        ];
+        const result = scrollAnimations?.Spin3dScroll?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});