@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -0,0 +1,414 @@
+import { describe, expect, test } from 'vitest';
+import * as SpinAnimation from '../Spin';
+import { baseMockOptions } from './testUtils';
+describe('Spin', () => {
+    describe('web() method', () => {
+        test('Spin animation with default options', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    easing: 'linear',
+                    delay: 0,
+                    duration: 1000,
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'linear',
+                            rotate: 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin animation with custom duration, delay, and easing', () => {
+            const duration = 1000;
+            const delay = 500;
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                delay,
+                easing: 'quintInOut',
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-067',
+                    easing: 'linear',
+                    delay: 0,
+                    duration: 1500,
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
+                            rotate: 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                        },
+                        {
+                            offset: 0.67,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin animation with counter-clockwise direction', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { direction: 'counter-clockwise' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + 360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'linear',
+                            rotate: 'calc(var(--comp-rotate-z, 0deg) + 360deg)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin animation with custom power - soft', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { power: 'soft' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    easing: 'linear',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'linear',
+                            rotate: 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin animation with custom power - medium', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { power: 'medium' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    easing: 'linear',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
+                            rotate: 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin animation with custom power - hard', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { power: 'hard' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    easing: 'linear',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                            rotate: 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin animation with custom easing override', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                easing: 'easeInOut',
+                namedEffect: { power: 'medium' }, // Should be overridden by custom easing
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    easing: 'linear',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'cubic-bezier(0.86, 0, 0.07, 1)', // Power takes precedence over custom easing
+                            rotate: 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+    describe('style() method', () => {
+        test('Spin.style animation with default options', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    easing: 'linear',
+                    delay: 0,
+                    duration: 1000,
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'linear',
+                            rotate: 'var(--motion-rotate-start)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.style(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin.style animation with custom duration and delay', () => {
+            const duration = 800;
+            const delay = 200;
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                delay,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-08',
+                    easing: 'linear',
+                    delay: 0,
+                    duration: 1000,
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'linear',
+                            rotate: 'var(--motion-rotate-start)',
+                        },
+                        {
+                            offset: 0.8, // duration / (duration + delay)
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.style(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin.style animation with counter-clockwise direction', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { direction: 'counter-clockwise' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + 360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'linear',
+                            rotate: 'var(--motion-rotate-start)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.style(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin.style animation with custom power - soft', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { power: 'soft' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'linear',
+                            rotate: 'var(--motion-rotate-start)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.style(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin.style animation with custom power - medium', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { power: 'medium' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
+                            rotate: 'var(--motion-rotate-start)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.style(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin.style animation with custom power - hard', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { power: 'hard' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-spin-1',
+                    custom: {
+                        '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                            rotate: 'var(--motion-rotate-start)',
+                        },
+                        {
+                            offset: 1,
+                            rotate: 'var(--comp-rotate-z, 0deg)',
+                        },
+                    ],
+                },
+            ];
+            const result = SpinAnimation.style(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('Spin.style animation should use CSS custom properties', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                namedEffect: { direction: 'clockwise', power: 'medium' },
+            };
+            const result = SpinAnimation.style(mockOptions);
+            // Verify CSS custom properties are set
+            expect(result[0].custom).toEqual({
+                '--motion-rotate-start': 'calc(var(--comp-rotate-z, 0deg) + -360deg)',
+            });
+            // Verify keyframes use CSS variables
+            expect(result[0].keyframes[0].rotate).toBe('var(--motion-rotate-start)');
+            expect(result[0].keyframes[1].rotate).toBe('var(--comp-rotate-z, 0deg)');
+        });
+    });
+});

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

@@ -0,0 +1,240 @@
+import { describe, expect, test } from 'vitest';
+import * as Swing from '../Swing';
+import { baseMockOptions } from './testUtils';
+describe('Swing', () => {
+    describe('style function', () => {
+        test('default values', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-swing-1',
+                    duration: 1,
+                    custom: {
+                        '--motion-swing-deg': '20deg',
+                        '--motion-trans-x': '0%',
+                        '--motion-trans-y': '-50%',
+                        '--motion-ease-in': 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+                        '--motion-ease-inout': 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+                        '--motion-ease-out': 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+                    },
+                    keyframes: [
+                        {
+                            easing: 'var(--motion-ease-out)',
+                            offset: 0,
+                            transform: 'rotateZ(var(--comp-rotate-z, 0deg)) translate(var(--motion-trans-x), var(--motion-trans-y)) rotate(0deg) translate(calc(var(--motion-trans-x) * -1), calc(var(--motion-trans-y) * -1))',
+                        },
+                        {
+                            easing: 'var(--motion-ease-inout)',
+                            offset: 0.25,
+                            transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-trans-x), var(--motion-trans-y)) rotate(var(--motion-swing-deg)) translate(calc(var(--motion-trans-x) * -1), calc(var(--motion-trans-y) * -1))',
+                        },
+                        {
+                            easing: 'var(--motion-ease-in)',
+                            offset: 0.75,
+                            transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-trans-x), var(--motion-trans-y)) rotate(calc(var(--motion-swing-deg) * -1)) translate(calc(var(--motion-trans-x) * -1), calc(var(--motion-trans-y) * -1))',
+                        },
+                        {
+                            offset: 1,
+                            transform: 'rotateZ(var(--comp-rotate-z, 0deg)) translate(var(--motion-trans-x), var(--motion-trans-y)) rotate(0deg) translate(calc(var(--motion-trans-x) * -1), calc(var(--motion-trans-y) * -1))',
+                        },
+                    ],
+                },
+            ];
+            const result = Swing.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom swing, duration and easing', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                delay: 500,
+                easing: 'linear',
+                namedEffect: { swing: 30 },
+            };
+            const result = Swing.style(mockOptions);
+            expect(result[0]).toMatchObject({
+                name: 'motion-swing-067',
+                duration: 4050,
+                custom: {
+                    '--motion-swing-deg': '30deg',
+                    '--motion-trans-x': '0%',
+                    '--motion-trans-y': '-50%',
+                    '--motion-ease-in': 'linear',
+                    '--motion-ease-inout': 'linear',
+                    '--motion-ease-out': 'linear',
+                },
+            });
+            // Check that delay sequence is used (more keyframes)
+            expect(result[0].keyframes.length).toBe(9); // 7 delay sequence + start + end
+            expect(result[0].keyframes[0].easing).toBe('var(--motion-ease-out)');
+        });
+        test('custom direction - right', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'right' },
+            };
+            const result = Swing.style(mockOptions);
+            expect(result[0].custom).toMatchObject({
+                '--motion-trans-x': '50%',
+                '--motion-trans-y': '0%',
+            });
+            expect(result[0].keyframes[0].transform).toContain('translate(var(--motion-trans-x), var(--motion-trans-y))');
+        });
+        test('custom direction - left', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'left' },
+            };
+            const result = Swing.style?.(mockOptions);
+            expect(result[0].custom).toMatchObject({
+                '--motion-trans-x': '-50%',
+                '--motion-trans-y': '0%',
+            });
+        });
+        test('custom direction - bottom', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'bottom' },
+            };
+            const result = Swing.style?.(mockOptions);
+            expect(result[0].custom).toMatchObject({
+                '--motion-trans-x': '0%',
+                '--motion-trans-y': '50%',
+            });
+        });
+        test('custom power - soft', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { power: 'soft' },
+            };
+            const result = Swing.style(mockOptions);
+            expect(result[0].custom).toMatchObject({
+                '--motion-swing-deg': '20deg', // soft = 1 * 20
+            });
+        });
+        test('custom power - medium', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { power: 'medium' },
+            };
+            const result = Swing.style?.(mockOptions);
+            expect(result[0].custom).toMatchObject({
+                '--motion-swing-deg': '40deg', // medium = 2 * 20
+            });
+        });
+        test('custom power - hard', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { power: 'hard' },
+            };
+            const result = Swing.style?.(mockOptions);
+            expect(result[0].custom).toMatchObject({
+                '--motion-swing-deg': '60deg', // hard = 3 * 20
+            });
+        });
+    });
+    describe('web function', () => {
+        test('default values with web output', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-swing-1',
+                    duration: 1,
+                    custom: {
+                        '--motion-swing-deg': '20deg',
+                        '--motion-trans-x': '0%',
+                        '--motion-trans-y': '-50%',
+                        '--motion-ease-in': 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+                        '--motion-ease-inout': 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+                        '--motion-ease-out': 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+                    },
+                    keyframes: [
+                        {
+                            easing: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+                            offset: 0,
+                            transform: 'rotateZ(var(--comp-rotate-z, 0deg)) translate(0%, -50%) rotate(0deg) translate(calc(0% * -1), calc(-50% * -1))',
+                        },
+                        {
+                            easing: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+                            offset: 0.25,
+                            transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(0%, -50%) rotate(20deg) translate(calc(0% * -1), calc(-50% * -1))',
+                        },
+                        {
+                            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+                            offset: 0.75,
+                            transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(0%, -50%) rotate(calc(20deg * -1)) translate(calc(0% * -1), calc(-50% * -1))',
+                        },
+                        {
+                            offset: 1,
+                            transform: 'rotateZ(var(--comp-rotate-z, 0deg)) translate(0%, -50%) rotate(0deg) translate(calc(0% * -1), calc(-50% * -1))',
+                        },
+                    ],
+                },
+            ];
+            const result = Swing.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('custom swing, duration and easing with web output', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                duration: 1000,
+                delay: 500,
+                easing: 'linear',
+                namedEffect: { swing: 30 },
+            };
+            const result = Swing.web(mockOptions);
+            expect(result[0]).toMatchObject({
+                name: 'motion-swing-067',
+                duration: 4050,
+                custom: {
+                    '--motion-swing-deg': '30deg',
+                    '--motion-trans-x': '0%',
+                    '--motion-trans-y': '-50%',
+                    '--motion-ease-in': 'linear',
+                    '--motion-ease-inout': 'linear',
+                    '--motion-ease-out': 'linear',
+                },
+            });
+            // Check that keyframes contain actual computed values, not CSS variables
+            const firstKeyframe = result[0].keyframes[0];
+            expect(firstKeyframe.transform).toContain('translate(0%, -50%)');
+            expect(firstKeyframe.transform).toContain('translate(calc(0% * -1), calc(-50% * -1))');
+            expect(firstKeyframe.transform).not.toContain('var(--motion-trans-x)');
+            expect(firstKeyframe.transform).not.toContain('var(--motion-trans-y)');
+            // Check a delay sequence keyframe contains computed swing degree values
+            const delayKeyframe = result[0].keyframes[1]; // First delay sequence keyframe
+            expect(delayKeyframe.transform).toContain('rotate(calc(30deg * 1))'); // factor 1 for first delay keyframe
+            expect(delayKeyframe.transform).not.toContain('var(--motion-swing-deg)');
+            // Check that all easing values are actual values, not CSS variables
+            result[0].keyframes.forEach((keyframe) => {
+                if (keyframe.easing) {
+                    expect(keyframe.easing).toBe('linear');
+                }
+            });
+        });
+        test('custom direction - right with web output', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'right' },
+            };
+            const result = Swing.web(mockOptions);
+            expect(result[0].keyframes[0].transform).toContain('translate(50%, 0%)');
+            expect(result[0].keyframes[0].transform).toContain('translate(calc(50% * -1), calc(0% * -1))');
+        });
+        test('custom power - medium with web output', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { power: 'medium' },
+            };
+            const result = Swing.web(mockOptions);
+            expect(result[0].keyframes[1].transform).toContain('rotate(40deg)');
+            expect(result[0].keyframes[2].transform).toContain('rotate(calc(40deg * -1))');
+        });
+    });
+});