@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/ongoing/test/Cross.spec.js

@@ -0,0 +1,579 @@
+import { describe, expect, test } from 'vitest';
+import * as Cross from '../Cross';
+import { baseMockOptions } from './testUtils';
+describe('Cross', () => {
+    describe('web function', () => {
+        test('default values', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: {},
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)) 0',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom duration', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                delay: 500,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: {},
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1500,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)) 0',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) 0',
+                        },
+                        {
+                            offset: 0.67,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom direction - top', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'top' },
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: { direction: 'top' },
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: '0 calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%))',
+                        },
+                        {
+                            offset: 0,
+                            translate: '0 calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom direction - bottom', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'bottom' },
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: { direction: 'bottom' },
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: '0 calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))',
+                        },
+                        {
+                            offset: 0,
+                            translate: '0 calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%))',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom direction - left', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'left' },
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: { direction: 'left' },
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) 0',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)) 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom direction - top-left', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'top-left' },
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: { direction: 'top-left' },
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(min(calc(calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) * -1), calc(calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%)) * -1)) * -1) calc(min(calc(calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) * -1), calc(calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%)) * -1)) * -1)',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(min(calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)), calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))) * 1) calc(min(calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)), calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))) * 1)',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom direction - top-right', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'top-right' },
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: { direction: 'top-right' },
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(min(calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)), calc(calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%)) * -1)) * 1) calc(min(calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)), calc(calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%)) * -1)) * -1)',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(min(calc(calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) * -1), calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))) * -1) calc(min(calc(calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) * -1), calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))) * 1)',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom direction - bottom-left', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'bottom-left' },
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: { direction: 'bottom-left' },
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(min(calc(calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) * -1), calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))) * -1) calc(min(calc(calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) * -1), calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))) * 1)',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(min(calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)), calc(calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%)) * -1)) * 1) calc(min(calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)), calc(calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%)) * -1)) * -1)',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom direction - bottom-right', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'bottom-right' },
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: { direction: 'bottom-right' },
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(min(calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)), calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))) * 1) calc(min(calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)), calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))) * 1)',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(min(calc(calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) * -1), calc(calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%)) * -1)) * -1) calc(min(calc(calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) * -1), calc(calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%)) * -1)) * -1)',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('no duration specified uses default', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: undefined,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: {},
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 1,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('equal duration and delay', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                delay: 1000,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: {},
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 2000,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)) 0',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) 0',
+                        },
+                        {
+                            offset: 0.5,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('delay longer than duration', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 500,
+                delay: 1500,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    ...baseMockOptions,
+                    namedEffect: {},
+                    name: 'motion-cross',
+                    delay: 0,
+                    easing: 'linear',
+                    duration: 2000,
+                    custom: {
+                        '--motion-left': '0px',
+                        '--motion-top': '0px',
+                        '--motion-width': '100%',
+                        '--motion-height': '100%',
+                        '--motion-parent-width': '100vw',
+                        '--motion-parent-height': '100vh',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            translate: '0 0',
+                        },
+                        {
+                            easing: 'step-start',
+                            offset: 0,
+                            translate: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px)) 0',
+                        },
+                        {
+                            offset: 0,
+                            translate: 'calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%)) 0',
+                        },
+                        {
+                            offset: 0.25,
+                            translate: '0 0',
+                        },
+                        {
+                            offset: 1,
+                            translate: '0 0',
+                        },
+                    ],
+                },
+            ];
+            const result = Cross.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+});

package/dist/es/library/ongoing/test/DVD.spec.js

@@ -0,0 +1,63 @@
+import { describe, expect, test } from 'vitest';
+import * as DVD from '../DVD';
+import { baseMockOptions } from './testUtils';
+describe('DVD', () => {
+    test('default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                duration: 9 / 8,
+                keyframes: [
+                    {
+                        translate: 'calc(-1 * var(--motion-left, 0px))',
+                    },
+                    {
+                        translate: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px) - var(--motion-width, 100%))',
+                    },
+                ],
+                timing: {
+                    iterationStart: 0,
+                },
+            },
+            {
+                duration: 8 / 9,
+                keyframes: [
+                    {
+                        translate: '0 calc(-1 * var(--motion-top, 0px))',
+                    },
+                    {
+                        translate: '0 calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px) - var(--motion-height, 100%))',
+                    },
+                ],
+                timing: {
+                    iterationStart: 0,
+                },
+            },
+        ];
+        const result = DVD.web(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom duration and delay', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            delay: 500,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                delay: 500,
+                duration: 1125,
+            },
+            {
+                delay: 500,
+                duration: 888.8888888888888,
+            },
+        ];
+        const result = DVD.web(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});