@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -0,0 +1,105 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('BgZoom', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { type: 'BgZoom' },
+        };
+        const expectedResult = [
+            {},
+            {
+                keyframes: [
+                    {
+                        transform: `translateY(20svh)`,
+                    },
+                    {
+                        transform: `translateY(calc(calc(-0.2 * var(--motion-comp-height, 0px) + 0.5 * 0.4 * max(0px, 100lvh - var(--motion-comp-height, 0px))) * 1.67))`,
+                    },
+                ],
+            },
+            {
+                part: 'BG_IMG',
+                composite: 'add',
+                keyframes: [
+                    {
+                        transform: `perspective(100px) translateZ(0px)`,
+                    },
+                    {
+                        transform: `perspective(100px) translateZ(40px)`,
+                    },
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgZoom(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom zoom', () => {
+        const zoom = 40;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { zoom, type: 'BgZoom' },
+        };
+        const expectedResult = [
+            {},
+            {
+                keyframes: [
+                    {
+                        transform: `translateY(20svh)`,
+                    },
+                    {
+                        transform: `translateY(calc(calc(-0.2 * var(--motion-comp-height, 0px) + 0.5 * 0.4 * max(0px, 100lvh - var(--motion-comp-height, 0px))) * 1.67))`,
+                    },
+                ],
+            },
+            {
+                part: 'BG_IMG',
+                composite: 'add',
+                keyframes: [
+                    {
+                        transform: `perspective(100px) translateZ(0px)`,
+                    },
+                    {
+                        transform: `perspective(100px) translateZ(40px)`,
+                    },
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgZoom(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom direction - out', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction: 'out', type: 'BgZoom' },
+        };
+        const expectedResult = [
+            {},
+            {
+                keyframes: [
+                    {
+                        transform: `translateY(0px)`,
+                    },
+                    {
+                        transform: `translateY(calc(0px * 0.87))`,
+                    },
+                ],
+            },
+            {
+                part: 'BG_IMG',
+                composite: 'replace',
+                keyframes: [
+                    {
+                        transform: `perspective(100px) translateZ(11.54px)`,
+                    },
+                    {
+                        transform: `perspective(100px) translateZ(-15px)`,
+                    },
+                ],
+            },
+        ];
+        const result = backgroundScrollAnimations.BgZoom(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

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

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest';
+import { backgroundScrollAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('ImageParallax', () => {
+    test('Default values', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { type: 'ImageParallax' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: 'translateY(-33%)' }, { transform: 'translateY(0%)' }],
+            },
+        ];
+        const result = backgroundScrollAnimations.ImageParallax(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Reversed', () => {
+        const reverse = true;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { reverse, type: 'ImageParallax' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: 'translateY(0%)' }, { transform: 'translateY(-33%)' }],
+            },
+        ];
+        const result = backgroundScrollAnimations.ImageParallax(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('Custom speed', () => {
+        const speed = 2;
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { speed, type: 'ImageParallax' },
+        };
+        const expectedResult = [
+            {
+                keyframes: [{ transform: 'translateY(-50%)' }, { transform: 'translateY(0%)' }],
+            },
+        ];
+        const result = backgroundScrollAnimations.ImageParallax(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/backgroundScroll/test/testUtils.js

@@ -0,0 +1,3 @@
+export const baseMockOptions = {
+    id: '1',
+};

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

@@ -0,0 +1,30 @@
+export function measureCompHeight(measures, dom, assignToCss) {
+    dom.measure((target) => {
+        if (!target) {
+            return;
+        }
+        measures.compHeight = target.offsetHeight;
+    });
+    if (assignToCss) {
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-comp-height', `${measures.compHeight}px`);
+        });
+    }
+}
+const getMasterPage = () => window.document.getElementById('masterPage');
+const getWixAdsHeight = () => {
+    const wixAds = window.document.getElementById('WIX_ADS');
+    return wixAds ? wixAds.offsetHeight : 0;
+};
+const getSiteHeight = () => {
+    const masterPage = getMasterPage();
+    return masterPage ? masterPage.offsetHeight + getWixAdsHeight() : 0; // probably tests that don't have masterPage created
+};
+export function measureSiteHeight(measures, dom) {
+    dom.measure(() => {
+        measures.siteHeight = getSiteHeight();
+    });
+}
+export function getScaleFromPerspectiveAndZ(z, perspective) {
+    return z > perspective ? 0 : 1.0 / (1 - z / perspective);
+}

package/dist/es/library/entrance/ArcIn.js

@@ -0,0 +1,78 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+const ROTATION_ANGLE = 80;
+const DIRECTION_MAP = {
+    top: { x: 1, y: 0, sign: 1 },
+    right: { x: 0, y: 1, sign: 1 },
+    bottom: { x: 1, y: 0, sign: -1 },
+    left: { x: 0, y: 1, sign: -1 },
+};
+const EASING_MAP = {
+    soft: 'cubicInOut',
+    medium: 'quintInOut',
+    hard: 'backOut',
+};
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options, true);
+}
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-arcIn'];
+}
+export function style(options, asWeb = false) {
+    const { power, direction = 'right' } = options.namedEffect;
+    const [fadeIn, arcIn] = getNames(options);
+    const easing = (power && EASING_MAP[power]) || options.easing || 'quintInOut';
+    // we can remove dependency on measurement here if we use a "layout wrapper" as a `container`: https://jsbin.com/mulojuwogi/edit?css,output
+    // we could also consider a fixed value for z, e.g. 300px like in ArcScroll
+    // const { width, height } = element.getBoundingClientRect();
+    const { x, y, sign } = DIRECTION_MAP[direction];
+    // const z = rotateX ? height / 2 : width / 2;
+    const z = `(-1 * (var(--motion-height, 100vh) * var(--motion-arc-x, 1) + var(--motion-width, 100vw) * var(--motion-arc-y, 0))) / 2`;
+    const custom = {
+        '--motion-arc-x': `${x}`,
+        '--motion-arc-y': `${y}`,
+        '--motion-arc-sign': `${sign}`,
+    };
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            duration: options.duration * 0.7,
+            easing: 'sineIn',
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: arcIn,
+            easing,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    transform: `perspective(800px) translateZ(calc(${z})) rotateX(calc(${toKeyframeValue(custom, '--motion-arc-x', asWeb)} * ${toKeyframeValue(custom, '--motion-arc-sign', asWeb)} * ${ROTATION_ANGLE}deg)) rotateY(calc(${toKeyframeValue(custom, '--motion-arc-y', asWeb)} * ${toKeyframeValue(custom, '--motion-arc-sign', asWeb)} * ${ROTATION_ANGLE}deg)) translateZ(calc(-1 * ${z})) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+                {
+                    transform: `perspective(800px) translateZ(calc(${z})) rotateX(0deg) rotateY(0deg) translateZ(calc(-1 * ${z})) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+            ],
+        },
+    ];
+}
+export function prepare(_, dom) {
+    if (dom) {
+        let width, height;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rect = target.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-height', `${height}px`);
+            target?.style.setProperty('--motion-width', `${width}px`);
+        });
+    }
+}

package/dist/es/library/entrance/BlurIn.js

@@ -0,0 +1,46 @@
+import { toKeyframeValue } from '../../utils';
+const BLUR_POWER_MAP = {
+    soft: 6,
+    medium: 25,
+    hard: 50,
+};
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-blurIn'];
+}
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { blur = 6, power } = options.namedEffect;
+    const [fadeIn, blurIn] = getNames(options);
+    const easing = options.easing || 'linear';
+    const blurFactor = power && BLUR_POWER_MAP[power] ? BLUR_POWER_MAP[power] : blur;
+    const custom = {
+        '--motion-blur': `${blurFactor}px`,
+    };
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            duration: options.duration * 0.7,
+            easing: 'sineIn',
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: blurIn,
+            easing,
+            composite: 'add', // make sure we don't override existing filters on the component
+            custom,
+            keyframes: [
+                {
+                    filter: `blur(${toKeyframeValue(custom, '--motion-blur', asWeb)})`,
+                },
+                {
+                    filter: 'blur(0px)',
+                },
+            ],
+        },
+    ];
+}

package/dist/es/library/entrance/BounceIn.js

@@ -0,0 +1,83 @@
+import { getEasingFamily, getEasing, toKeyframeValue, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-bounceIn'];
+}
+const { in: easeIn, out: easeOut } = getEasingFamily('sineIn');
+const BOUNCE_KEYFRAMES = [
+    { offset: INITIAL_FRAME_OFFSET * 100, translate: 100 },
+    { offset: 30, translate: 0 },
+    { offset: 42, translate: 35 },
+    { offset: 54, translate: 0 },
+    { offset: 62, translate: 21 },
+    { offset: 74, translate: 0 },
+    { offset: 82, translate: 9 },
+    { offset: 90, translate: 0 },
+    { offset: 95, translate: 2 },
+    { offset: 100, translate: 0, isIn: true },
+];
+const POWER_MAP = {
+    soft: 1,
+    medium: 2,
+    hard: 3,
+};
+const TRANSLATE_DIRECTION_MAP = {
+    top: { y: -1, x: 0, z: 0 },
+    right: { y: 0, x: 1, z: 0 },
+    bottom: { y: 1, x: 0, z: 0 },
+    left: { y: 0, x: -1, z: 0 },
+    center: { x: 0, y: 0, z: -1 },
+};
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, distanceFactor: distance = 1, direction = 'bottom', } = options.namedEffect;
+    const [fadeIn, bounceIn] = getNames(options);
+    const distanceFactor = (power && POWER_MAP[power]) || distance;
+    const perspective = direction === 'center' ? 'perspective(800px)' : ' ';
+    const { x, y, z } = TRANSLATE_DIRECTION_MAP[direction];
+    const custom = {
+        '--motion-direction-x': x,
+        '--motion-direction-y': y,
+        '--motion-direction-z': z,
+        '--motion-distance-factor': distanceFactor,
+        '--motion-perspective': perspective,
+        '--motion-ease-in': getEasing(easeOut),
+        '--motion-ease-out': getEasing(easeIn),
+    };
+    const easeIn_ = toKeyframeValue(custom, '--motion-ease-in', asWeb);
+    const easeOut_ = toKeyframeValue(custom, '--motion-ease-out', asWeb);
+    const distanceFactor_ = toKeyframeValue(custom, '--motion-distance-factor', asWeb);
+    const perspective_ = toKeyframeValue(custom, '--motion-perspective', asWeb, ' ');
+    const directionX = toKeyframeValue(custom, '--motion-direction-x', asWeb);
+    const directionY = toKeyframeValue(custom, '--motion-direction-y', asWeb);
+    const directionZ = toKeyframeValue(custom, '--motion-direction-z', asWeb);
+    const keyframes = BOUNCE_KEYFRAMES.map(({ offset, translate }, index) => ({
+        offset: offset / 100,
+        animationTimingFunction: index % 2 ? easeIn_ : easeOut_,
+        transform: `${perspective_.trim()} translate3d(calc(${directionX} * ${distanceFactor_} * ${translate / 2}px), calc(${directionY} * ${distanceFactor_} * ${translate / 2}px), calc(${directionZ} * ${distanceFactor_} * ${translate / 2}px)) rotateZ(var(--comp-rotate-z, 0deg))`,
+    }));
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            easing: 'quadOut',
+            duration: (options.duration * BOUNCE_KEYFRAMES[3].offset) / 100,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: bounceIn,
+            easing: 'linear',
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    transform: `perspective(800px) translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`,
+                },
+                ...keyframes,
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,77 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-circleXIn', 'motion-circleYIn'];
+}
+const ROTATION = 45;
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'right' } = options.namedEffect;
+    const [circleXIn, circleYIn] = getNames(options);
+    const x = direction === 'right'
+        ? 'calc(100vw - var(--motion-left, 0px))'
+        : 'calc(var(--motion-left, 0px) * -1 - 100%)';
+    const y = 'min(calc(100% * -1.5), max(-300px, calc(100% * -5.5)))';
+    const customX = {
+        '--motion-translate-x': x,
+    };
+    const customY = {
+        '--motion-translate-y': y,
+        '--motion-rotate-z': `${(direction === 'right' ? 1 : -1) * ROTATION}deg`,
+    };
+    return [
+        {
+            ...options,
+            name: circleXIn,
+            easing: 'circOut',
+            custom: customX,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    translate: toKeyframeValue(customX, '--motion-translate-x', asWeb),
+                },
+                {
+                    translate: '0',
+                },
+            ],
+        },
+        {
+            ...options,
+            name: circleYIn,
+            easing: 'linear',
+            custom: customY,
+            keyframes: [
+                {
+                    offset: 0,
+                    opacity: 0,
+                    easing: 'step-end',
+                },
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    opacity: 0,
+                    transform: `translateY(${toKeyframeValue(customY, '--motion-translate-y', asWeb)}) rotate(calc(var(--comp-rotate-z, 0deg) + ${toKeyframeValue(customY, '--motion-rotate-z', asWeb)}))`,
+                },
+                {
+                    opacity: 'var(--comp-opacity, 1)',
+                    transform: `translateY(0) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+            ],
+        },
+    ];
+}
+export function prepare(_, dom) {
+    if (dom) {
+        let left = 0;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            left = target.getBoundingClientRect().left;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-left', `${left}px`);
+        });
+    }
+}

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

@@ -0,0 +1,61 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-curveIn'];
+}
+const PARAMS_MAP = {
+    pseudoRight: { rotationX: '180', rotationY: '0' },
+    right: { rotationX: '0', rotationY: '180' },
+    pseudoLeft: { rotationX: '-180', rotationY: '0' },
+    left: { rotationX: '0', rotationY: '-180' },
+};
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'right' } = options.namedEffect;
+    const [curveIn] = getNames(options);
+    const { rotationX, rotationY } = PARAMS_MAP[direction];
+    const custom = {
+        '--motion-rotate-x': `${rotationX}deg`,
+        '--motion-rotate-y': `${rotationY}deg`,
+    };
+    return [
+        {
+            ...options,
+            name: curveIn,
+            easing: 'quadOut',
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    opacity: 0,
+                    easing: 'step-end',
+                },
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    opacity: 0,
+                    transform: `perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(${toKeyframeValue(custom, '--motion-rotate-x', asWeb)}) rotateY(${toKeyframeValue(custom, '--motion-rotate-y', asWeb)}) 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))',
+                },
+            ],
+        },
+    ];
+}
+export function prepare(_, dom) {
+    if (dom) {
+        let width;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            width = target.getBoundingClientRect().width;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-width', `${width}px`);
+        });
+    }
+}

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

@@ -0,0 +1,46 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-dropIn'];
+}
+const PARAMS_MAP = {
+    soft: { scale: 1.2, ease: 'cubicInOut' },
+    medium: { scale: 1.6, ease: 'quintInOut' },
+    hard: { scale: 2, ease: 'backOut' },
+};
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, initialScale = PARAMS_MAP.medium.scale } = options.namedEffect;
+    const [fadeIn, dropIn] = getNames(options);
+    const scale = (power && PARAMS_MAP[power].scale) || initialScale;
+    const easing = (power && PARAMS_MAP[power].ease) || options.easing || 'quintInOut';
+    const custom = {
+        '--motion-scale': `${scale}`,
+    };
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            easing: 'quadOut',
+            duration: options.duration * 0.8,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: dropIn,
+            easing,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    scale: toKeyframeValue(custom, '--motion-scale', asWeb),
+                },
+                {
+                    scale: '1',
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,80 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-expandIn'];
+}
+const SCALE_MAP = {
+    soft: 0.8,
+    medium: 0.6,
+    hard: 0,
+};
+const TRANSFORM_ORIGIN_MAP = {
+    top: { x: 0, y: -0.5 },
+    'top-right': { x: 0.5, y: -0.5 },
+    right: { x: 0.5, y: 0 },
+    'bottom-right': { x: 0.5, y: 0.5 },
+    bottom: { x: 0, y: 0.5 },
+    'bottom-left': { x: -0.5, y: 0.5 },
+    left: { x: -0.5, y: 0 },
+    'top-left': { x: -0.5, y: -0.5 },
+    center: { x: 0, y: 0 },
+};
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, initialScale = 0, direction = 'center' } = options.namedEffect;
+    const [fadeIn, expandIn] = getNames(options);
+    const easing = options.easing || 'cubicInOut';
+    const scale_ = power && power in SCALE_MAP ? SCALE_MAP[power] : initialScale;
+    const { x, y } = TRANSFORM_ORIGIN_MAP[direction];
+    const custom = {
+        '--motion-translate-x': x,
+        '--motion-translate-y': y,
+        '--motion-scale': scale_,
+    };
+    const transX = toKeyframeValue(custom, '--motion-translate-x', asWeb);
+    const transY = toKeyframeValue(custom, '--motion-translate-y', asWeb);
+    const scale = toKeyframeValue(custom, '--motion-scale', asWeb);
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            easing: 'linear',
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: expandIn,
+            easing,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    transform: `translateX(calc(var(--motion-width, 100%) * ${transX})) translateY(calc(var(--motion-height, 100%) * ${transY})) scale(${scale}) translateX(calc(var(--motion-width, 100%) * -1 * ${transX})) translateY(calc(var(--motion-height, 100%) * -1 * ${transY}))  rotate(var(--comp-rotate-z, 0deg))`,
+                },
+                {
+                    transform: `translateX(calc(var(--motion-width, 100%) * ${transX})) translateY(calc(var(--motion-height, 100%) * ${transY})) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * ${transX})) translateY(calc(var(--motion-height, 100%) * -1 * ${transY})) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+            ],
+        },
+    ];
+}
+export function prepare(_, dom) {
+    if (dom) {
+        let width, height;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rect = target.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-width', `${width}px`);
+            target?.style.setProperty('--motion-height', `${height}px`);
+        });
+    }
+}

package/dist/es/library/entrance/FadeIn.js

@@ -0,0 +1,17 @@
+export function getNames(_) {
+    return ['motion-fadeIn'];
+}
+export function web(options) {
+    return style(options);
+}
+export function style(options) {
+    const [fadeIn] = getNames(options);
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            easing: 'sineInOut',
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+    ];
+}