@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/entrance/test/CircleIn.spec.js

@@ -0,0 +1,174 @@
+import { describe, expect, test } from 'vitest';
+import { entranceAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('CircleIn', () => {
+    describe('web method', () => {
+        test('CircleIn animation with default options', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    easing: 'circOut',
+                    keyframes: [{ translate: 'calc(100vw - var(--motion-left, 0px))' }, {}],
+                },
+                {
+                    easing: 'linear',
+                    keyframes: [
+                        {
+                            offset: 0,
+                            opacity: 0,
+                            easing: 'step-end',
+                        },
+                        {
+                            offset: 0.000001,
+                            opacity: 0,
+                            transform: 'translateY(min(calc(100% * -1.5), max(-300px, calc(100% * -5.5)))) rotate(calc(var(--comp-rotate-z, 0deg) + 45deg))',
+                        },
+                        {
+                            opacity: 'var(--comp-opacity, 1)',
+                            transform: 'translateY(0) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.CircleIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('CircleIn animation with left direction', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'left' },
+            };
+            const expectedResult = [
+                {
+                    keyframes: [
+                        {
+                            translate: 'calc(var(--motion-left, 0px) * -1 - 100%)',
+                        },
+                        {},
+                    ],
+                },
+                {
+                    keyframes: [
+                        {
+                            offset: 0,
+                            opacity: 0,
+                            easing: 'step-end',
+                        },
+                        {
+                            offset: 0.000001,
+                            opacity: 0,
+                            transform: 'translateY(min(calc(100% * -1.5), max(-300px, calc(100% * -5.5)))) rotate(calc(var(--comp-rotate-z, 0deg) + -45deg))',
+                        },
+                        {
+                            opacity: 'var(--comp-opacity, 1)',
+                            transform: 'translateY(0) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.CircleIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+    describe('style method', () => {
+        test('CircleIn style with default options', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    easing: 'circOut',
+                    name: 'motion-circleXIn',
+                    custom: {
+                        '--motion-translate-x': 'calc(100vw - var(--motion-left, 0px))',
+                    },
+                    keyframes: [
+                        {
+                            translate: 'var(--motion-translate-x)',
+                        },
+                        {
+                            translate: '0',
+                        },
+                    ],
+                },
+                {
+                    easing: 'linear',
+                    name: 'motion-circleYIn',
+                    custom: {
+                        '--motion-translate-y': 'min(calc(100% * -1.5), max(-300px, calc(100% * -5.5)))',
+                        '--motion-rotate-z': '45deg',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            opacity: 0,
+                            easing: 'step-end',
+                        },
+                        {
+                            offset: 0.000001,
+                            opacity: 0,
+                            transform: 'translateY(var(--motion-translate-y)) rotate(calc(var(--comp-rotate-z, 0deg) + var(--motion-rotate-z)))',
+                        },
+                        {
+                            opacity: 'var(--comp-opacity, 1)',
+                            transform: 'translateY(0) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.CircleIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('CircleIn style with left direction', () => {
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'left' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-circleXIn',
+                    custom: {
+                        '--motion-translate-x': 'calc(var(--motion-left, 0px) * -1 - 100%)',
+                    },
+                    keyframes: [
+                        {
+                            translate: 'var(--motion-translate-x)',
+                        },
+                        {
+                            translate: '0',
+                        },
+                    ],
+                },
+                {
+                    name: 'motion-circleYIn',
+                    custom: {
+                        '--motion-translate-y': 'min(calc(100% * -1.5), max(-300px, calc(100% * -5.5)))',
+                        '--motion-rotate-z': '-45deg',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            opacity: 0,
+                            easing: 'step-end',
+                        },
+                        {
+                            offset: 0.000001,
+                            opacity: 0,
+                            transform: 'translateY(var(--motion-translate-y)) rotate(calc(var(--comp-rotate-z, 0deg) + var(--motion-rotate-z)))',
+                        },
+                        {
+                            opacity: 'var(--comp-opacity, 1)',
+                            transform: 'translateY(0) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.CircleIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+});

package/dist/es/library/entrance/test/CurveIn.spec.js

@@ -0,0 +1,143 @@
+import { describe, expect, test } from 'vitest';
+import { entranceAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('CurveIn', () => {
+    describe('web method', () => {
+        test('CurveIn animation with default options', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {},
+                duration,
+            };
+            const expectedResult = [
+                {
+                    easing: 'quadOut',
+                    keyframes: [
+                        {
+                            offset: 0,
+                            opacity: 0,
+                            easing: 'step-end',
+                        },
+                        {
+                            offset: 0.000001,
+                            opacity: 0,
+                            transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(180deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            opacity: 'var(--comp-opacity, 1)',
+                            transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(0deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.CurveIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('CurveIn animation with left direction', () => {
+            const duration = 1500;
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'left' },
+                duration,
+            };
+            const expectedResult = [
+                {
+                    easing: 'quadOut',
+                    keyframes: [
+                        {
+                            offset: 0,
+                            opacity: 0,
+                            easing: 'step-end',
+                        },
+                        {
+                            offset: 0.000001,
+                            opacity: 0,
+                            transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(-180deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            opacity: 'var(--comp-opacity, 1)',
+                            transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(0deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.CurveIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+    describe('style method', () => {
+        test('CurveIn style with default options', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {},
+                duration,
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-curveIn',
+                    easing: 'quadOut',
+                    custom: {
+                        '--motion-rotate-x': '0deg',
+                        '--motion-rotate-y': '180deg',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            opacity: 0,
+                            easing: 'step-end',
+                        },
+                        {
+                            offset: 0.000001,
+                            opacity: 0,
+                            transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(var(--motion-rotate-x)) rotateY(var(--motion-rotate-y)) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            opacity: 'var(--comp-opacity, 1)',
+                            transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(0deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.CurveIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('CurveIn style with left direction', () => {
+            const duration = 1500;
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { direction: 'left' },
+                duration,
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-curveIn',
+                    easing: 'quadOut',
+                    custom: {
+                        '--motion-rotate-x': '0deg',
+                        '--motion-rotate-y': '-180deg',
+                    },
+                    keyframes: [
+                        {
+                            offset: 0,
+                            opacity: 0,
+                            easing: 'step-end',
+                        },
+                        {
+                            offset: 0.000001,
+                            opacity: 0,
+                            transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(var(--motion-rotate-x)) rotateY(var(--motion-rotate-y)) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            opacity: 'var(--comp-opacity, 1)',
+                            transform: 'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(0deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.CurveIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+});

package/dist/es/library/entrance/test/DropIn.spec.js

@@ -0,0 +1,172 @@
+import { describe, expect, test } from 'vitest';
+import { entranceAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('DropIn', () => {
+    describe('web method', () => {
+        test('DropIn animation with default options', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    duration: 800,
+                },
+                {
+                    easing: 'quintInOut',
+                    keyframes: [{ scale: '1.6' }, { scale: '1' }],
+                },
+            ];
+            const result = entranceAnimations.DropIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('DropIn animation with custom power', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                namedEffect: { power: 'hard' },
+            };
+            const expectedResult = [
+                {
+                    duration: 800,
+                },
+                {
+                    easing: 'backOut',
+                    keyframes: [{ scale: '2' }, { scale: '1' }],
+                },
+            ];
+            const result = entranceAnimations.DropIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('DropIn animation with custom easing', () => {
+            const duration = 1000;
+            const customEasing = 'circInOut';
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                easing: customEasing,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    duration: 800,
+                },
+                {
+                    easing: customEasing,
+                    keyframes: [{ scale: '1.6' }, { scale: '1' }],
+                },
+            ];
+            const result = entranceAnimations.DropIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+    describe('style method', () => {
+        test('DropIn style with default options', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-fadeIn',
+                    easing: 'quadOut',
+                    duration: 800,
+                    custom: {},
+                    keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+                },
+                {
+                    name: 'motion-dropIn',
+                    easing: 'quintInOut',
+                    custom: {
+                        '--motion-scale': '1.6',
+                    },
+                    keyframes: [
+                        {
+                            scale: 'var(--motion-scale)',
+                        },
+                        {
+                            scale: '1',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.DropIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('DropIn style with custom power', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                namedEffect: { power: 'hard' },
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-fadeIn',
+                    easing: 'quadOut',
+                    duration: 800,
+                    custom: {},
+                    keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+                },
+                {
+                    name: 'motion-dropIn',
+                    easing: 'backOut',
+                    custom: {
+                        '--motion-scale': '2',
+                    },
+                    keyframes: [
+                        {
+                            scale: 'var(--motion-scale)',
+                        },
+                        {
+                            scale: '1',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.DropIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('DropIn style with custom easing', () => {
+            const duration = 1000;
+            const customEasing = 'circInOut';
+            const mockOptions = {
+                ...baseMockOptions,
+                duration,
+                easing: customEasing,
+                namedEffect: {},
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-fadeIn',
+                    easing: 'quadOut',
+                    duration: 800,
+                    custom: {},
+                    keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+                },
+                {
+                    name: 'motion-dropIn',
+                    easing: customEasing,
+                    custom: {
+                        '--motion-scale': '1.6',
+                    },
+                    keyframes: [
+                        {
+                            scale: 'var(--motion-scale)',
+                        },
+                        {
+                            scale: '1',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.DropIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+});

package/dist/es/library/entrance/test/ExpandIn.spec.js

@@ -0,0 +1,194 @@
+import { describe, expect, test } from 'vitest';
+import { entranceAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('ExpandIn', () => {
+    describe('web method', () => {
+        test('ExpandIn animation with default options', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                direction: 'center',
+                namedEffect: {},
+                duration,
+            };
+            const expectedResult = [
+                {},
+                {
+                    easing: 'cubicInOut',
+                    keyframes: [
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * 0)) translateY(calc(var(--motion-height, 100%) * 0)) scale(0) translateX(calc(var(--motion-width, 100%) * -1 * 0)) translateY(calc(var(--motion-height, 100%) * -1 * 0))  rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * 0)) translateY(calc(var(--motion-height, 100%) * 0)) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * 0)) translateY(calc(var(--motion-height, 100%) * -1 * 0)) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.ExpandIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('ExpandIn animation with custom direction and initialScale', () => {
+            const duration = 1500;
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {
+                    direction: 'top-right',
+                    initialScale: 0.5,
+                },
+                duration,
+            };
+            const expectedResult = [
+                {},
+                {
+                    easing: 'cubicInOut',
+                    keyframes: [
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * 0.5)) translateY(calc(var(--motion-height, 100%) * -0.5)) scale(0.5) translateX(calc(var(--motion-width, 100%) * -1 * 0.5)) translateY(calc(var(--motion-height, 100%) * -1 * -0.5))  rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * 0.5)) translateY(calc(var(--motion-height, 100%) * -0.5)) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * 0.5)) translateY(calc(var(--motion-height, 100%) * -1 * -0.5)) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.ExpandIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('ExpandIn animation with custom power', () => {
+            const duration = 2000;
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { power: 'hard' },
+                duration,
+            };
+            const expectedResult = [
+                {},
+                {
+                    easing: 'cubicInOut',
+                    keyframes: [
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * 0)) translateY(calc(var(--motion-height, 100%) * 0)) scale(0) translateX(calc(var(--motion-width, 100%) * -1 * 0)) translateY(calc(var(--motion-height, 100%) * -1 * 0))  rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * 0)) translateY(calc(var(--motion-height, 100%) * 0)) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * 0)) translateY(calc(var(--motion-height, 100%) * -1 * 0)) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.ExpandIn.web(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+    describe('style method', () => {
+        test('ExpandIn style with default options', () => {
+            const duration = 1000;
+            const mockOptions = {
+                ...baseMockOptions,
+                direction: 'center',
+                namedEffect: {},
+                duration,
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-fadeIn',
+                    easing: 'linear',
+                    custom: {},
+                    keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+                },
+                {
+                    name: 'motion-expandIn',
+                    easing: 'cubicInOut',
+                    custom: {
+                        '--motion-translate-x': 0,
+                        '--motion-translate-y': 0,
+                        '--motion-scale': 0,
+                    },
+                    keyframes: [
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * var(--motion-translate-y))) scale(var(--motion-scale)) translateX(calc(var(--motion-width, 100%) * -1 * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * -1 * var(--motion-translate-y)))  rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * var(--motion-translate-y))) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * -1 * var(--motion-translate-y))) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.ExpandIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('ExpandIn style with custom direction and initialScale', () => {
+            const duration = 1500;
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: {
+                    direction: 'top-right',
+                    initialScale: 0.5,
+                },
+                duration,
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-fadeIn',
+                    easing: 'linear',
+                    custom: {},
+                    keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+                },
+                {
+                    name: 'motion-expandIn',
+                    easing: 'cubicInOut',
+                    custom: {
+                        '--motion-translate-x': 0.5,
+                        '--motion-translate-y': -0.5,
+                        '--motion-scale': 0.5,
+                    },
+                    keyframes: [
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * var(--motion-translate-y))) scale(var(--motion-scale)) translateX(calc(var(--motion-width, 100%) * -1 * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * -1 * var(--motion-translate-y)))  rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * var(--motion-translate-y))) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * -1 * var(--motion-translate-y))) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.ExpandIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+        test('ExpandIn style with custom power', () => {
+            const duration = 2000;
+            const mockOptions = {
+                ...baseMockOptions,
+                namedEffect: { power: 'hard' },
+                duration,
+            };
+            const expectedResult = [
+                {
+                    name: 'motion-fadeIn',
+                    easing: 'linear',
+                    custom: {},
+                    keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+                },
+                {
+                    name: 'motion-expandIn',
+                    easing: 'cubicInOut',
+                    custom: {
+                        '--motion-translate-x': 0,
+                        '--motion-translate-y': 0,
+                        '--motion-scale': 0,
+                    },
+                    keyframes: [
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * var(--motion-translate-y))) scale(var(--motion-scale)) translateX(calc(var(--motion-width, 100%) * -1 * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * -1 * var(--motion-translate-y)))  rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                        {
+                            transform: 'translateX(calc(var(--motion-width, 100%) * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * var(--motion-translate-y))) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * var(--motion-translate-x))) translateY(calc(var(--motion-height, 100%) * -1 * var(--motion-translate-y))) rotate(var(--comp-rotate-z, 0deg))',
+                        },
+                    ],
+                },
+            ];
+            const result = entranceAnimations.ExpandIn.style?.(mockOptions);
+            expect(result).toMatchObject(expectedResult);
+        });
+    });
+});