@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -0,0 +1,106 @@
+import { getAdjustedDirection, getClipPolygonParams, INITIAL_FRAME_OFFSET, } from '../../utils';
+export function getNames(options) {
+    const { power } = options.namedEffect;
+    return power !== 'hard' ? ['motion-slideIn', 'motion-fadeIn'] : ['motion-slideIn'];
+}
+const PARAM_MAP = {
+    top: { dx: 0, dy: -1, clip: 'bottom' },
+    right: { dx: 1, dy: 0, clip: 'left' },
+    bottom: { dx: 0, dy: 1, clip: 'top' },
+    left: { dx: -1, dy: 0, clip: 'right' },
+};
+const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+const INITIAL_TRANSLATE_MAP = {
+    soft: 0.2,
+    medium: 0.8,
+    hard: 1,
+};
+export function web(options, dom) {
+    const animations = style(options);
+    prepare(options, dom);
+    return animations;
+}
+export function style(options) {
+    const { direction = 'left', power, initialTranslate = 1 } = options.namedEffect;
+    const [slideIn, fadeIn] = getNames(options);
+    const easing = options.easing || 'cubicInOut';
+    const scale = (power && INITIAL_TRANSLATE_MAP[power]) || initialTranslate;
+    const minimum = 100 - scale * 100;
+    const start = getClipPolygonParams({
+        direction,
+        minimum,
+    });
+    const clipEnd = getClipPolygonParams({ direction: 'initial' });
+    const custom = {
+        '--motion-clip-start': start,
+        '--motion-translate-x': `${PARAM_MAP[direction].dx * 100}%`,
+        '--motion-translate-y': `${PARAM_MAP[direction].dy * 100}%`,
+    };
+    const animations = [
+        {
+            ...options,
+            name: slideIn,
+            easing,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    opacity: 'var(--comp-opacity, 1)',
+                    transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-translate-x, -100%), var(--motion-translate-y, 0%))`,
+                    clipPath: `var(--motion-clip-start, ${custom['--motion-clip-start']})`,
+                },
+                {
+                    transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(0px, 0px)',
+                    clipPath: clipEnd,
+                },
+            ],
+        },
+    ];
+    if (power !== 'hard') {
+        animations.push({
+            ...options,
+            easing: 'cubicInOut',
+            name: fadeIn,
+            // @ts-expect-error
+            custom: {},
+            keyframes: [
+                // @ts-expect-error
+                { offset: 0, opacity: 0 },
+                // @ts-expect-error
+                { opacity: 'var(--comp-opacity, 1)' },
+            ],
+        });
+    }
+    else {
+        animations[0].keyframes.unshift({
+            offset: 0,
+            // @ts-expect-error
+            opacity: 0,
+            easing: 'step-end',
+        });
+    }
+    return animations;
+}
+export function prepare(options, dom) {
+    const { direction = 'left', power, initialTranslate = 1 } = options.namedEffect;
+    const scale = (power && INITIAL_TRANSLATE_MAP[power]) || initialTranslate;
+    const minimum = 100 - scale * 100;
+    if (dom) {
+        let rotation = 0;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            rotation = parseInt(getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg', 10);
+        });
+        dom.mutate((target) => {
+            const adjustedDirection = getAdjustedDirection(DIRECTIONS, direction, rotation);
+            target?.style.setProperty('--motion-clip-start', getClipPolygonParams({
+                direction: PARAM_MAP[adjustedDirection].clip,
+                minimum,
+            }));
+            target?.style.setProperty('--motion-translate-x', `${PARAM_MAP[adjustedDirection].dx * 100}%`);
+            target?.style.setProperty('--motion-translate-y', `${PARAM_MAP[adjustedDirection].dy * 100}%`);
+        });
+    }
+}

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

@@ -0,0 +1,54 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-spinIn'];
+}
+const SCALE_MAP = {
+    soft: 1,
+    medium: 0.6,
+    hard: 0,
+};
+const DIRECTION_MAP = {
+    clockwise: -1,
+    'counter-clockwise': 1,
+};
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'clockwise', spins = 0.5, initialScale = 0, power, } = options.namedEffect;
+    const [fadeIn, spinIn] = getNames(options);
+    const easing = options.easing || 'cubicInOut';
+    const scale = typeof power !== 'undefined' ? SCALE_MAP[power] : initialScale;
+    const transformRotate = (DIRECTION_MAP[direction] > 0 ? 1 : -1) * 360 * spins;
+    const custom = {
+        '--motion-scale': `${scale}`,
+        '--motion-rotate': `${transformRotate}deg`,
+    };
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            easing: 'cubicIn',
+            duration: options.duration * scale,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: spinIn,
+            easing,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    scale: toKeyframeValue(custom, '--motion-scale', asWeb),
+                    rotate: toKeyframeValue(custom, '--motion-rotate', asWeb),
+                },
+                {
+                    scale: '1',
+                    rotate: `0deg`,
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,96 @@
+import { getAdjustedDirection, getClipPolygonParams, INITIAL_FRAME_OFFSET, toKeyframeValue, } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-tiltInRotate', 'motion-tiltInClip'];
+}
+const ROTATION_MAP = {
+    left: 30,
+    right: -30,
+};
+const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+function getClipStart(rotateZ) {
+    const clipDirection = getAdjustedDirection(DIRECTIONS, 'top', rotateZ);
+    return getClipPolygonParams({
+        direction: clipDirection,
+        minimum: 0,
+    });
+}
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'left' } = options.namedEffect;
+    const [fadeIn, tiltInRotate, tiltInClip] = getNames(options);
+    const easing = options.easing || 'cubicOut';
+    const clipStart = getClipStart(0);
+    const rotationZ = ROTATION_MAP[direction];
+    const clipEnd = getClipPolygonParams({ direction: 'initial' });
+    const translateZ = '(var(--motion-height, 200px) / 2)';
+    const clipCustom = {
+        '--motion-rotate-z': `${rotationZ}deg`,
+        '--motion-clip-start': clipStart,
+    };
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            duration: options.duration * 0.2,
+            easing: 'cubicOut',
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: tiltInRotate,
+            easing,
+            custom: {},
+            keyframes: [
+                {
+                    offset: 0,
+                    easing: 'step-end',
+                    transform: 'perspective(800px)',
+                },
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(-90deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+                {
+                    transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(0deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+            ],
+        },
+        {
+            ...options,
+            name: tiltInClip,
+            easing,
+            composite: 'add',
+            duration: options.duration * 0.8,
+            custom: clipCustom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    clipPath: `var(--motion-clip-start, ${clipCustom['--motion-clip-start']})`,
+                    transform: `rotateZ(${toKeyframeValue(clipCustom, '--motion-rotate-z', asWeb)})`,
+                },
+                {
+                    clipPath: clipEnd,
+                    transform: `rotateZ(0deg)`,
+                },
+            ],
+        },
+    ];
+}
+export function prepare(_, dom) {
+    if (dom) {
+        let rotation = '0deg';
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';
+        });
+        dom.mutate((target_) => {
+            target_?.style.setProperty('--motion-clip-start', getClipStart(parseInt(rotation, 10)));
+        });
+    }
+}

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

@@ -0,0 +1,73 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-turnIn'];
+}
+const EASING_MAP = {
+    soft: 'cubicInOut',
+    medium: 'quintInOut',
+    hard: 'backOut',
+};
+const DIRECTION_TO_TRANSFORM_MAP = {
+    'top-left': {
+        angle: -50,
+        x: -50,
+        y: -50,
+    },
+    'top-right': {
+        angle: 50,
+        x: 50,
+        y: -50,
+    },
+    'bottom-right': {
+        angle: 50,
+        x: 50,
+        y: 50,
+    },
+    'bottom-left': {
+        angle: -50,
+        x: -50,
+        y: 50,
+    },
+};
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'top-left', power } = options.namedEffect;
+    const [fadeIn, turnIn] = getNames(options);
+    const easing = power && EASING_MAP[power] ? EASING_MAP[power] : options.easing || 'backOut';
+    const { x, y } = DIRECTION_TO_TRANSFORM_MAP[direction];
+    const transformRotate = DIRECTION_TO_TRANSFORM_MAP[direction].angle;
+    const custom = {
+        '--motion-origin': `${x}%, ${y}%`,
+        '--motion-origin-invert': `${-x}%, ${-y}%`,
+        '--motion-rotate-z': `${transformRotate}deg`,
+    };
+    const origin = toKeyframeValue(custom, '--motion-origin', asWeb);
+    const invertedOrigin = toKeyframeValue(custom, '--motion-origin-invert', asWeb);
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            duration: options.duration * 0.6,
+            easing: 'sineIn',
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: turnIn,
+            easing,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    transform: `translate(${origin}) rotate(${toKeyframeValue(custom, '--motion-rotate-z', asWeb)}) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+                {
+                    transform: `translate(${origin}) rotate(0deg) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,94 @@
+import { getClipPolygonParams, getAdjustedDirection, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-winkInClip', 'motion-winkInRotate'];
+}
+const PARAM_MAP = {
+    vertical: { scaleY: 0, scaleX: 1 },
+    horizontal: { scaleY: 1, scaleX: 0 },
+};
+const DIRECTIONS = ['vertical', 'horizontal'];
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options);
+}
+export function style(options) {
+    const { direction = 'horizontal' } = options.namedEffect;
+    const [fadeIn, winkInClip, winkInRotate] = getNames(options);
+    const adjustedDirection = getAdjustedDirection(DIRECTIONS, direction, 0);
+    const { scaleX, scaleY } = PARAM_MAP[adjustedDirection];
+    const easing = options.easing || 'quintInOut';
+    const start = getClipPolygonParams({ direction, minimum: 100 });
+    const end = getClipPolygonParams({ direction: 'initial' });
+    const custom = {
+        '--motion-scale-x': scaleX,
+        '--motion-scale-y': scaleY,
+        '--motion-clip-start': start,
+    };
+    return [
+        {
+            ...options,
+            easing: 'quadOut',
+            name: fadeIn,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            easing,
+            name: winkInClip,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    clipPath: `var(--motion-clip-start, ${custom['--motion-clip-start']})`,
+                },
+                {
+                    clipPath: end,
+                },
+            ],
+        },
+        {
+            ...options,
+            duration: options.duration * 0.85,
+            easing,
+            name: winkInRotate,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    transform: `rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, ${custom['--motion-scale-x']}), var(--motion-scale-y, ${custom['--motion-scale-y']}))`,
+                },
+                {
+                    transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                },
+            ],
+        },
+    ];
+}
+export function prepare(options, dom) {
+    const { direction = 'horizontal' } = options.namedEffect;
+    if (dom) {
+        let scale = PARAM_MAP.horizontal;
+        let rotatedClip = getClipPolygonParams({
+            direction: 'horizontal',
+            minimum: 100,
+        });
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0';
+            const rotatedDirection = getAdjustedDirection(DIRECTIONS, direction, parseInt(rotation, 10));
+            scale = PARAM_MAP[rotatedDirection];
+            rotatedClip = getClipPolygonParams({
+                direction: rotatedDirection,
+                minimum: 100,
+            });
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-clip-start', rotatedClip);
+            target?.style.setProperty('--motion-scale-x', `${scale.scaleX}`);
+            target?.style.setProperty('--motion-scale-y', `${scale.scaleY}`);
+        });
+    }
+}

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

@@ -22,28 +22,27 @@ import * as TiltIn from './TiltIn';
 import * as TurnIn from './TurnIn';
 import * as WinkIn from './WinkIn';
 export const entranceAnimations = {
-  ArcIn,
-  BlurIn,
-  ShuttersIn,
-  BounceIn,
-  CurveIn,
-  CircleIn,
-  DropIn,
-  ExpandIn,
-  FadeIn,
-  FlipIn,
-  FloatIn,
-  FoldIn,
-  GlideIn,
-  GlitchIn,
-  GrowIn,
-  PunchIn,
-  ShapeIn,
-  RevealIn,
-  SlideIn,
-  SpinIn,
-  TiltIn,
-  TurnIn,
-  WinkIn
+    ArcIn,
+    BlurIn,
+    ShuttersIn,
+    BounceIn,
+    CurveIn,
+    CircleIn,
+    DropIn,
+    ExpandIn,
+    FadeIn,
+    FlipIn,
+    FloatIn,
+    FoldIn,
+    GlideIn,
+    GlitchIn,
+    GrowIn,
+    PunchIn,
+    ShapeIn,
+    RevealIn,
+    SlideIn,
+    SpinIn,
+    TiltIn,
+    TurnIn,
+    WinkIn,
 };
-//# sourceMappingURL=index.js.map