@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/backgroundScroll/BgZoom.js

@@ -0,0 +1,108 @@
+import { roundNumber } from '../../utils';
+import { measureCompHeight, getScaleFromPerspectiveAndZ } from './utils';
+const PERSPECTIVE = 100;
+const DEFAULT_ZOOM = 40;
+const ZOOM_OUT_FACTOR = 0.375; // 15/40 - this for using the same scale of values in the data
+const DIRECTION_TO_PARAMS = {
+    in: {
+        easing: 'sineIn',
+        fromY: '20svh',
+    },
+    out: {
+        easing: 'sineInOut',
+        fromY: '0px',
+    },
+};
+export default function create(options, dom) {
+    const { direction = 'in' } = options.namedEffect;
+    const isIn = direction === 'in';
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom, isIn);
+    }
+    const { easing, fromY } = DIRECTION_TO_PARAMS[direction];
+    let { zoom = DEFAULT_ZOOM } = options.namedEffect;
+    if (!isIn) {
+        zoom *= ZOOM_OUT_FACTOR;
+    }
+    const fromZ = roundNumber(isIn ? 0 : zoom / 1.3);
+    const toZ = roundNumber(isIn ? zoom : -zoom);
+    const toScale = roundNumber(getScaleFromPerspectiveAndZ(toZ, PERSPECTIVE));
+    return [
+        {
+            ...options,
+            part: 'BG_MEDIA',
+            easing: 'linear',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            keyframes: [
+                {
+                    transform: 'translate3d(0, 0, 0)',
+                },
+                {
+                    transform: 'translate3d(0, 0, 0)',
+                },
+            ],
+        },
+        {
+            ...options,
+            part: 'BG_IMG',
+            easing: 'linear',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100svh + ${measures.compHeight}px)`;
+            },
+            get keyframes() {
+                const toY = isIn
+                    ? `calc(-0.2 * var(--motion-comp-height, ${measures.compHeight}px) + 0.5 * ${zoom / PERSPECTIVE} * max(0px, 100lvh - var(--motion-comp-height, ${measures.compHeight}px)))`
+                    : '0px';
+                return [
+                    {
+                        transform: `translateY(${fromY})`,
+                    },
+                    {
+                        transform: `translateY(calc(${toY} * ${toScale}))`,
+                    },
+                ];
+            },
+        },
+        {
+            ...options,
+            easing,
+            part: 'BG_IMG',
+            composite: isIn ? 'add' : 'replace',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100svh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    transform: `perspective(${PERSPECTIVE}px) translateZ(${fromZ}px)`,
+                },
+                {
+                    transform: `perspective(${PERSPECTIVE}px) translateZ(${toZ}px)`,
+                },
+            ],
+        },
+    ];
+}

package/dist/es/library/backgroundScroll/ImageParallax.js

@@ -0,0 +1,46 @@
+import { measureCompHeight, measureSiteHeight } from './utils';
+export default function create(options, dom) {
+    const { speed = 1.5, reverse = false, isPage = false } = options.namedEffect;
+    const measures = { compHeight: 0, siteHeight: 0 };
+    if (dom) {
+        if (isPage) {
+            measureSiteHeight(measures, dom);
+        }
+        else {
+            measureCompHeight(measures, dom);
+        }
+    }
+    let start = -100 * (speed - 1);
+    if (!isPage) {
+        start = start / speed;
+    }
+    let end = 0;
+    if (reverse) {
+        [start, end] = [end, start];
+    }
+    return [
+        {
+            ...options,
+            part: 'BG_MEDIA',
+            startOffset: {
+                name: isPage ? 'contain' : 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return isPage ? `${measures.siteHeight}px` : `calc(100vh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    transform: `translateY(${start | 0}%)`,
+                },
+                {
+                    transform: `translateY(${end | 0}%)`,
+                },
+            ],
+        },
+    ];
+}

package/dist/{esm → es}/library/backgroundScroll/index.js

@@ -11,17 +11,16 @@ import BgSkew from './BgSkew';
 import BgZoom from './BgZoom';
 import ImageParallax from './ImageParallax';
 export const backgroundScrollAnimations = {
-  BgCloseUp,
-  BgFade,
-  BgFadeBack,
-  BgFake3D,
-  BgPan,
-  BgParallax,
-  BgPullBack,
-  BgReveal,
-  BgRotate,
-  BgSkew,
-  BgZoom,
-  ImageParallax
+    BgCloseUp,
+    BgFade,
+    BgFadeBack,
+    BgFake3D,
+    BgPan,
+    BgParallax,
+    BgPullBack,
+    BgReveal,
+    BgRotate,
+    BgSkew,
+    BgZoom,
+    ImageParallax,
 };
-//# sourceMappingURL=index.js.map

package/dist/es/library/backgroundScroll/test/BgCloseUp.spec.js

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgCloseUp', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            { ...baseMockOptions },
+            {
+                ...baseMockOptions,
+                keyframes: [{}, { transform: `perspective(100px) translateZ(80px)` }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgCloseUp(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom values', () => {
+        const scale = 50;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { scale },
+        };
+        const expectedResult = [
+            { ...baseMockOptions },
+            {
+                ...baseMockOptions,
+                keyframes: [{}, { transform: `perspective(100px) translateZ(50px)` }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgCloseUp(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/BgFade.spec.js

@@ -0,0 +1,34 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgFade', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                ...baseMockOptions,
+                easing: 'sineIn',
+                keyframes: [{ opacity: 0 }, { opacity: 1 }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgFade(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom range - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { range: 'out' },
+        };
+        const expectedResult = [
+            {
+                easing: 'sineOut',
+                keyframes: [{ opacity: 1 }, { opacity: 0 }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgFade(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/BgFadeBack.spec.js

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgFadeBack', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {},
+            {
+                ...baseMockOptions,
+                keyframes: [{ scale: 1 }, { scale: 0.7 }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgFadeBack(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom scale', () => {
+        const scale = 0.7;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { scale },
+        };
+        const expectedResult = [
+            {},
+            {
+                ...baseMockOptions,
+                keyframes: [{ scale: 1 }, { scale }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgFadeBack(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/BgFake3D.spec.js

@@ -0,0 +1,63 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgFake3D', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                ...baseMockOptions,
+                keyframes: [
+                    { transform: 'translateY(10svh)' },
+                    {
+                        transform: `translateY(calc(-0.08 * var(--motion-comp-height, 0px)))`,
+                    },
+                ],
+            },
+            {
+                keyframes: [{ transform: `scaleY(1.3)` }, { transform: 'scaleY(1)' }],
+            },
+            {
+                keyframes: [
+                    { transform: 'perspective(100px) translateZ(0px)' },
+                    { transform: `perspective(100px) translateZ(16.67px)` },
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgFake3D(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom values', () => {
+        const stretch = 1.5;
+        const zoom = 30;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { stretch, zoom },
+        };
+        const expectedResult = [
+            {
+                ...baseMockOptions,
+                keyframes: [
+                    { transform: 'translateY(10svh)' },
+                    {
+                        transform: `translateY(calc(-0.06 * var(--motion-comp-height, 0px)))`,
+                    },
+                ],
+            },
+            {
+                keyframes: [{ transform: `scaleY(1.5)` }, { transform: 'scaleY(1)' }],
+            },
+            {
+                keyframes: [
+                    { transform: 'perspective(100px) translateZ(0px)' },
+                    { transform: `perspective(100px) translateZ(30px)` },
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgFake3D(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/BgPan.spec.js

@@ -0,0 +1,47 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgPan', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                ...baseMockOptions,
+                keyframes: [{ transform: 'translateX(8%)' }, { transform: 'translateX(-8%)' }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgPan(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom direction - right', () => {
+        const direction = 'right';
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: 'translateX(-8%)' }, { transform: 'translateX(8%)' }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgPan(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom speed', () => {
+        const speed = 0.5;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { speed },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: 'translateX(16%)' }, { transform: 'translateX(-16%)' }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgPan(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/BgParallax.spec.js

@@ -0,0 +1,44 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgParallax', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                ...baseMockOptions,
+                keyframes: [
+                    { transform: 'translateY(20svh)' },
+                    {
+                        transform: 'translateY(calc((100% - 200lvh) * -0.2))',
+                    },
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgParallax(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom speed', () => {
+        const speed = 0.5;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { speed },
+        };
+        const expectedResult = [
+            {
+                ...baseMockOptions,
+                keyframes: [
+                    { transform: 'translateY(50svh)' },
+                    {
+                        transform: 'translateY(calc((100% - 200lvh) * -0.5))',
+                    },
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgParallax(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/BgPullBack.spec.js

@@ -0,0 +1,42 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgPullBack', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: `perspective(100px) translate3d(0px, -16%, 50px)`,
+                    },
+                    {},
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgPullBack(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom scale', () => {
+        const scale = 60;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { scale },
+        };
+        const expectedResult = [
+            {
+                keyframes: [
+                    {
+                        transform: `perspective(100px) translate3d(0px, -20%, 60px)`,
+                    },
+                    {},
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgPullBack(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/BgRotate.spec.js

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgRotate', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { type: 'BgRotate' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: `rotate(22deg)` }, {}],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgRotate(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom angle', () => {
+        const angle = 30;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { angle, type: 'BgRotate' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: `rotate(30deg)` }, {}],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgRotate(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom direction - clockwise', () => {
+        const direction = 'clockwise';
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction, type: 'BgRotate' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: `rotate(-22deg)` }, {}],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgRotate(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/BgSkew.spec.js

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgSkew', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { type: 'BgSkew' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: `skewY(20deg)` }, { transform: `skewY(-20deg)` }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgSkew(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom angle', () => {
+        const angle = 20;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { angle, type: 'BgSkew' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: `skewY(20deg)` }, { transform: `skewY(-20deg)` }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgSkew(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom direction - clockwise', () => {
+        const direction = 'clockwise';
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction, type: 'BgSkew' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: `skewY(-20deg)` }, { transform: `skewY(20deg)` }],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgSkew(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});