@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/mouse/Tilt3DMouse.js

@@ -0,0 +1,34 @@
+import { getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+    soft: { angle: 25, perspective: 1000, easing: 'easeOut' },
+    medium: { angle: 50, perspective: 500, easing: 'easeOut' },
+    hard: { angle: 85, perspective: 200, easing: 'easeOut' },
+};
+class Tilt3DMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        const { invert, angle, perspective } = this.options;
+        // if progressX === 0, rotateX === -angle, if progressX === 0.5, rotateX === 0, if progressX === 1, rotateX === angle
+        const rotateX = mapRange(0, 1, angle, -angle, progressY) * invert;
+        const rotateY = mapRange(0, 1, -angle, angle, progressX) * invert;
+        this.target.style.transform = `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(var(--comp-rotate-z, 0deg))`;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, inverted = false, angle = 5, perspective = 800, } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}`
+            : '',
+        invert,
+        angle: power ? paramsMap[power].angle : angle,
+        perspective: power ? paramsMap[power].perspective : perspective,
+    };
+    return (target) => new Tilt3DMouseAnimation(target, animationOptions);
+}

package/dist/es/library/mouse/Track3DMouse.js

@@ -0,0 +1,50 @@
+import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+    soft: { angle: 25, perspective: 1000, easing: 'easeOut' },
+    medium: { angle: 50, perspective: 500, easing: 'easeOut' },
+    hard: { angle: 85, perspective: 333, easing: 'easeOut' },
+};
+class Track3DMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        const { invert, distance, angle, axis, perspective } = this.options;
+        let translateX = 0;
+        let translateY = 0;
+        let rotateX = 0;
+        let rotateY = 0;
+        // if progressX === 0, translateX === -distance
+        // if progressX === 0.5, translateX === 0
+        // if progressX === 1, translateX === distance
+        // if progressX === 0, rotateX === -angle, if progressX === 0.5, rotateX === 0, if progressX === 1, rotateX === angle
+        if (axis === 'both' || axis === 'horizontal') {
+            translateX = mapRange(0, 1, -distance.value, distance.value, progressX);
+            rotateY = mapRange(0, 1, -angle, angle, progressX) * invert;
+        }
+        if (axis === 'both' || axis === 'vertical') {
+            translateY = mapRange(0, 1, -distance.value, distance.value, progressY);
+            rotateX = mapRange(0, 1, angle, -angle, progressY) * invert;
+        }
+        const units = getCssUnits(distance.type);
+        this.target.style.transform = `perspective(${perspective}px) translateX(${translateX}${units}) translateY(${translateY}${units}) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(var(--comp-rotate-z, 0deg))`;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, inverted = false, distance = { value: 200, type: 'px' }, angle = 5, axis = 'both', perspective = 800, } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}`
+            : '',
+        invert,
+        distance,
+        axis,
+        angle: power ? paramsMap[power].angle : angle,
+        perspective: power ? paramsMap[power].perspective : perspective,
+    };
+    return (target) => new Track3DMouseAnimation(target, animationOptions);
+}

package/dist/es/library/mouse/TrackMouse.js

@@ -0,0 +1,43 @@
+import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const easingMap = {
+    soft: 'linear',
+    medium: 'easeOut',
+    hard: 'hardBackOut',
+};
+class TrackMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        const { invert, distance, axis } = this.options;
+        let translateX = 0;
+        let translateY = 0;
+        // if progressX === 0, translateX === -distance
+        // if progressX === 0.5, translateX === 0
+        // if progressX === 1, translateX === distance
+        if (axis === 'both' || axis === 'horizontal') {
+            translateX = mapRange(0, 1, -distance.value, distance.value, progressX) * invert;
+        }
+        if (axis === 'both' || axis === 'vertical') {
+            translateY = mapRange(0, 1, -distance.value, distance.value, progressY) * invert;
+        }
+        const units = getCssUnits(distance.type);
+        this.target.style.transform = `translateX(${translateX}${units}) translateY(${translateY}${units}) rotate(var(--comp-rotate-z, 0deg))`;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, inverted = false, distance = { value: 200, type: 'px' }, axis = 'both', } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? easingMap[power] : transitionEasing)}`
+            : '',
+        invert,
+        distance,
+        axis,
+    };
+    return (target) => new TrackMouseAnimation(target, animationOptions);
+}

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

@@ -11,17 +11,16 @@ import Tilt3DMouse from './Tilt3DMouse';
 import Track3DMouse from './Track3DMouse';
 import TrackMouse from './TrackMouse';
 export const mouseAnimations = {
-  AiryMouse,
-  BlobMouse,
-  BlurMouse,
-  BounceMouse,
-  CustomMouse: CreateCustomMouse,
-  ScaleMouse,
-  SkewMouse,
-  SpinMouse,
-  SwivelMouse,
-  Tilt3DMouse,
-  Track3DMouse,
-  TrackMouse
+    AiryMouse,
+    BlobMouse,
+    BlurMouse,
+    BounceMouse,
+    CustomMouse: CreateCustomMouse,
+    ScaleMouse,
+    SkewMouse,
+    SpinMouse,
+    SwivelMouse,
+    Tilt3DMouse,
+    Track3DMouse,
+    TrackMouse,
 };
-//# sourceMappingURL=index.js.map

package/dist/es/library/ongoing/Bounce.js

@@ -0,0 +1,58 @@
+import { getEasing, getTimingFactor, toKeyframeValue, mapRange } from '../../utils';
+const POWER_TO_BOUNCE_FACTOR_MAP = {
+    soft: 1,
+    medium: 2,
+    hard: 3,
+};
+const TRANSLATE_Y_KEYFRAMES = [
+    { keyframe: 0, translateY: 0 },
+    { keyframe: 8.8, translateY: -55 },
+    { keyframe: 17.6, translateY: -87 },
+    { keyframe: 26.5, translateY: -98 },
+    { keyframe: 35.3, translateY: -87 },
+    { keyframe: 44.1, translateY: -55 },
+    { keyframe: 53.1, translateY: 0 },
+    { keyframe: 66.2, translateY: -23 },
+    { keyframe: 81, translateY: 0 },
+    { keyframe: 86.8, translateY: -5 },
+    { keyframe: 94.1, translateY: 0 },
+    { keyframe: 97.1, translateY: -2 },
+    { keyframe: 100, translateY: 0 },
+];
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power = 'soft', intensity } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const timingFactor = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    const bounceFactor = intensity
+        ? mapRange(0, 1, POWER_TO_BOUNCE_FACTOR_MAP.soft, POWER_TO_BOUNCE_FACTOR_MAP.hard, intensity)
+        : POWER_TO_BOUNCE_FACTOR_MAP[power];
+    const easing = getEasing('sineOut');
+    const custom = {
+        '--motion-bounce-factor': bounceFactor,
+    };
+    const keyframes = TRANSLATE_Y_KEYFRAMES.map(({ keyframe, translateY }) => ({
+        offset: (keyframe / 100) * timingFactor,
+        translate: `0px calc(${translateY / 2}px * ${toKeyframeValue(custom, '--motion-bounce-factor', asWeb)})`,
+        easing,
+    }));
+    return [
+        {
+            ...options,
+            name,
+            delay: 0,
+            easing: 'linear',
+            duration: duration + delay,
+            custom,
+            keyframes,
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-bounce-${timingFactor}`];
+}

package/dist/es/library/ongoing/Breathe.js

@@ -0,0 +1,92 @@
+import { getCssUnits, getEasing, getEasingFamily, getTimingFactor, toKeyframeValue, } from '../../utils';
+const DIRECTION_MAP = {
+    vertical: { x: 0, y: 1, z: 0 },
+    horizontal: { x: 1, y: 0, z: 0 },
+    center: { x: 0, y: 0, z: 1 },
+};
+const FACTORS_SEQUENCE = [
+    { translateFactor: 1, timeFactor: 0.25 },
+    { translateFactor: -1, timeFactor: 0.5 },
+    { translateFactor: 1, timeFactor: 0.5 },
+    { translateFactor: -0.7, timeFactor: 0.5 },
+    { translateFactor: 0.6, timeFactor: 0.3333 },
+];
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'vertical', distance = { value: 25, type: 'px' } } = options.namedEffect;
+    const easing = options.easing || 'sineInOut';
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const totalDurationWithDelay = 3.2 * duration + delay;
+    const timingFactor = getTimingFactor(duration, totalDurationWithDelay - duration);
+    const [name] = getNames(options);
+    const { x, y, z } = DIRECTION_MAP[direction];
+    const ease = getEasingFamily(easing);
+    const perspectiveTransform = direction === 'center' ? 'perspective(800px)' : '';
+    // Create CSS custom properties for the Breathe configuration
+    const custom = {
+        '--motion-breathe-perspective': perspectiveTransform,
+        '--motion-breathe-distance': `${distance.value}${getCssUnits(distance.type || 'px')}`,
+        '--motion-breathe-x': x,
+        '--motion-breathe-y': y,
+        '--motion-breathe-z': z,
+    };
+    const breatheX = `${toKeyframeValue(custom, '--motion-breathe-x', asWeb)}`;
+    const breatheY = `${toKeyframeValue(custom, '--motion-breathe-y', asWeb)}`;
+    const breatheZ = `${toKeyframeValue(custom, '--motion-breathe-z', asWeb)}`;
+    const breathePerspective = `${toKeyframeValue(custom, '--motion-breathe-perspective', asWeb, ' ')}`;
+    const breatheDistance = `${toKeyframeValue(custom, '--motion-breathe-distance', asWeb)}`;
+    let currentOffset = 0;
+    // in case a delay is applied, animate a different sequence which decays to a stop
+    const keyframes = delay
+        ? FACTORS_SEQUENCE.map(({ translateFactor, timeFactor }) => {
+            const keyframeOffset = currentOffset + timeFactor * timingFactor;
+            currentOffset = keyframeOffset;
+            const distancePart = `${breatheDistance} * ${translateFactor}`;
+            return {
+                offset: keyframeOffset,
+                easing: getEasing(ease.inOut),
+                transform: `${breathePerspective} translate3d(calc(${breatheX} * ${distancePart}), calc(${breatheY} * ${distancePart}), calc(${breatheZ} * ${distancePart})) rotateZ(var(--comp-rotate-z, 0deg))`,
+            };
+        })
+        : [
+            {
+                offset: 0.25,
+                easing: getEasing(ease.inOut),
+                transform: `${breathePerspective} translate3d(calc(${breatheX} * ${breatheDistance}), calc(${breatheY} * ${breatheDistance}), calc(${breatheZ} * ${breatheDistance})) rotateZ(var(--comp-rotate-z, 0deg))`,
+            },
+            {
+                offset: 0.75,
+                easing: getEasing(ease.in),
+                transform: `${breathePerspective} translate3d(calc(${breatheX} * -1 * ${breatheDistance}), calc(${breatheY} * -1 * ${breatheDistance}), calc(${breatheZ} * -1 * ${breatheDistance})) rotateZ(var(--comp-rotate-z, 0deg))`,
+            },
+        ];
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: delay ? totalDurationWithDelay : duration,
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    easing: getEasing(ease.out),
+                    transform: `${breathePerspective} translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`,
+                },
+                ...keyframes,
+                {
+                    offset: 1,
+                    transform: `${breathePerspective} translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`,
+                },
+            ],
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-breathe-${timingFactor}`];
+}

package/dist/es/library/ongoing/Cross.js

@@ -0,0 +1,218 @@
+import { getElementOffset, getTimingFactor } from '../../utils';
+const FOUR_DIRECTIONS_TRANSLATIONS = {
+    // 100cqw - left
+    RIGHT: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px))',
+    // left * -1 - width
+    LEFT: 'calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%))',
+    // top * -1 - height
+    TOP: 'calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%))',
+    // 100cqh - top
+    BOTTOM: 'calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))',
+};
+const { RIGHT, LEFT, TOP, BOTTOM } = FOUR_DIRECTIONS_TRANSLATIONS;
+const FOUR_CORNERS_TRANSLATIONS = {
+    'top-left': {
+        // min(100cqw - left, 100cqh - top)
+        from: `min(${RIGHT}, ${BOTTOM})`,
+        // min(abs(left * -1 - width), abs(top * -1 - height))
+        to: `min(calc(${LEFT} * -1), calc(${TOP} * -1))`,
+    },
+    'top-right': {
+        // min(abs(left * -1 - width), 100cqh - top)
+        from: `min(calc(${LEFT} * -1), ${BOTTOM})`,
+        // min(100cqw - left, abs(top * -1 - height))
+        to: `min(${RIGHT}, calc(${TOP} * -1))`,
+    },
+    'bottom-left': {
+        // min(100cqw - left, abs(top * -1 - height))
+        from: `min(${RIGHT}, calc(${TOP} * -1))`,
+        // min(abs(left * -1 - width), 100cqh - top)
+        to: `min(calc(${LEFT} * -1), ${BOTTOM})`,
+    },
+    'bottom-right': {
+        // min(abs(left * -1 - width), abs(top * -1 - height))
+        from: `min(calc(${LEFT} * -1), calc(${TOP} * -1))`,
+        // min(100cqw - left, 100cqh - top)
+        to: `min(${RIGHT}, ${BOTTOM})`,
+    },
+};
+const TRANSLATE_BY_DIRECTION_MAP = {
+    left: {
+        from: `${RIGHT} 0`,
+        to: `${LEFT} 0`,
+    },
+    right: {
+        from: `${LEFT} 0`,
+        to: `${RIGHT} 0`,
+    },
+    top: {
+        from: `0 ${BOTTOM}`,
+        to: `0 ${TOP}`,
+    },
+    bottom: {
+        from: `0 ${TOP}`,
+        to: `0 ${BOTTOM}`,
+    },
+};
+const GET_OFFSET_BY_DIRECTION_MAP = {
+    // (width + left) / (100cqw + width)
+    left: ({ left, width, parentWidth }) => (width + left) / (parentWidth + width || 1),
+    // (100cqw - left) / (100cqw + width)
+    right: ({ left, width, parentWidth }) => (parentWidth - left) / (parentWidth + width || 1),
+    // (100cqh - top) / (100cqh + height)
+    bottom: ({ top, height, parentHeight }) => (parentHeight - top) / (parentHeight + height || 1),
+    // (height + top) / (100cqh + height)
+    top: ({ top, height, parentHeight }) => (height + top) / (parentHeight + height || 1),
+    // min(<left>, <top>)
+    'bottom-right': ({ left, top, width, height, parentWidth, parentHeight, }) => {
+        const leftDistance = width + left;
+        const topDistance = parentHeight - top;
+        return leftDistance < topDistance
+            ? leftDistance / (parentWidth + width || 1)
+            : topDistance / (parentHeight + height || 1);
+    },
+    // min(<right>, <top>)
+    'bottom-left': ({ left, top, width, height, parentWidth, parentHeight, }) => {
+        const rightDistance = parentWidth - left;
+        const topDistance = parentHeight - top;
+        return rightDistance < topDistance
+            ? rightDistance / (parentWidth + width || 1)
+            : topDistance / (parentHeight + height || 1);
+    },
+    // min(<left>, <bottom>)
+    'top-right': ({ left, top, width, height, parentWidth, parentHeight, }) => {
+        const leftDistance = parentWidth - left;
+        const bottomDistance = height + top;
+        return leftDistance < bottomDistance
+            ? leftDistance / (parentWidth + width || 1)
+            : bottomDistance / (parentHeight + height || 1);
+    },
+    // min(<right>, <bottom>)
+    'top-left': ({ left, top, width, height, parentWidth, parentHeight, }) => {
+        const rightDistance = parentWidth - left;
+        const bottomDistance = height + top;
+        return rightDistance < bottomDistance
+            ? rightDistance / (parentWidth + width || 1)
+            : bottomDistance / (parentHeight + height || 1);
+    },
+};
+function generateTranslate(direction) {
+    const _from = FOUR_CORNERS_TRANSLATIONS[direction].from;
+    const _to = FOUR_CORNERS_TRANSLATIONS[direction].to;
+    const fromYFactor = direction.startsWith('top') ? 1 : -1;
+    const toYFactor = -fromYFactor;
+    const fromXFactor = direction.endsWith('left') ? 1 : -1;
+    const toXFactor = -fromXFactor;
+    return {
+        from: `calc(${_from} * ${fromXFactor}) calc(${_from} * ${fromYFactor})`,
+        to: `calc(${_to} * ${toXFactor}) calc(${_to} * ${toYFactor})`,
+    };
+}
+export function web(options, dom) {
+    const { direction = 'right' } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const timingFactor = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    // Create CSS custom properties for the Cross configuration
+    const custom = {
+        '--motion-left': '0px',
+        '--motion-top': '0px',
+        '--motion-width': '100%',
+        '--motion-height': '100%',
+        '--motion-parent-width': '100vw',
+        '--motion-parent-height': '100vh',
+    };
+    /*
+     * Prepare function
+     */
+    let left = 0;
+    let top = 0;
+    let width = 0;
+    let height = 0;
+    let parentWidth = 0;
+    let parentHeight = 0;
+    if (dom) {
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const { width: targetWidth, height: targetHeight } = target.getBoundingClientRect();
+            const parent = target.offsetParent;
+            const parentRect = parent?.getBoundingClientRect() || {};
+            const offset = getElementOffset(target, parent);
+            left = offset.left;
+            top = offset.top;
+            width = targetWidth;
+            height = targetHeight;
+            parentWidth = parentRect.width;
+            parentHeight = parentRect.height;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-left', `${left}px`);
+            target?.style.setProperty('--motion-top', `${top}px`);
+            target?.style.setProperty('--motion-width', `${width}px`);
+            target?.style.setProperty('--motion-height', `${height}px`);
+            target?.style.setProperty('--motion-parent-width', `${parentWidth}px`);
+            target?.style.setProperty('--motion-parent-height', `${parentHeight}px`);
+        });
+    }
+    return [
+        {
+            ...options,
+            name,
+            delay: 0,
+            easing: 'linear',
+            duration: duration + delay,
+            custom,
+            get keyframes() {
+                // Calculate the timing offset for keyframes
+                const toDurationOffset = GET_OFFSET_BY_DIRECTION_MAP[direction]({
+                    left,
+                    top,
+                    width,
+                    height,
+                    parentWidth,
+                    parentHeight,
+                }) * timingFactor;
+                let from, to;
+                if (direction in TRANSLATE_BY_DIRECTION_MAP) {
+                    from =
+                        TRANSLATE_BY_DIRECTION_MAP[direction].from;
+                    to = TRANSLATE_BY_DIRECTION_MAP[direction].to;
+                }
+                else {
+                    const cornerFromTo = generateTranslate(direction);
+                    from = cornerFromTo.from;
+                    to = cornerFromTo.to;
+                }
+                return [
+                    {
+                        offset: 0,
+                        translate: '0 0',
+                    },
+                    {
+                        offset: toDurationOffset,
+                        translate: to,
+                        easing: 'step-start',
+                    },
+                    {
+                        offset: toDurationOffset,
+                        translate: from,
+                    },
+                    {
+                        offset: timingFactor,
+                        translate: '0 0',
+                    },
+                    {
+                        offset: 1,
+                        translate: '0 0',
+                    },
+                ];
+            },
+        },
+    ];
+}
+export function getNames(_) {
+    return ['motion-cross'];
+}

package/dist/es/library/ongoing/DVD.js

@@ -0,0 +1,85 @@
+import { getElementOffset } from '../../utils';
+const RATIO_DAMPING_FACTOR = 0.5;
+export function web(options, dom) {
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const [dvdX, dvdY] = getNames(options);
+    let left = 0;
+    let top = 0;
+    let parentWidth = 0;
+    let parentHeight = 0;
+    let ratio = (16 / 9) * RATIO_DAMPING_FACTOR;
+    if (dom) {
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rect = target.getBoundingClientRect();
+            const { width, height } = rect;
+            const parent = (target.closest('[data-block-level-container]') ||
+                target.offsetParent);
+            const offset = getElementOffset(target, parent);
+            left = offset.left;
+            top = offset.top;
+            parentWidth = parent?.offsetWidth || 0;
+            parentHeight = parent?.offsetHeight || 0;
+            ratio = (parentWidth / parentHeight) * RATIO_DAMPING_FACTOR;
+            dom.mutate(() => {
+                target.style.setProperty('--motion-left', `${left}px`);
+                target.style.setProperty('--motion-top', `${top}px`);
+                target.style.setProperty('--motion-width', `${width}px`);
+                target.style.setProperty('--motion-height', `${height}px`);
+                target.style.setProperty('--motion-parent-width', `${parentWidth}px`);
+                target.style.setProperty('--motion-parent-height', `${parentHeight}px`);
+            });
+        });
+    }
+    return [
+        {
+            ...options,
+            name: dvdX,
+            easing: 'linear',
+            delay,
+            duration: duration / ratio,
+            alternate: true,
+            keyframes: [
+                {
+                    translate: 'calc(-1 * var(--motion-left, 0px))',
+                },
+                {
+                    translate: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px) - var(--motion-width, 100%))',
+                },
+            ],
+            get timing() {
+                return {
+                    iterationStart: left && parentWidth ? left / parentWidth : 0,
+                };
+            },
+        },
+        {
+            ...options,
+            name: dvdY,
+            easing: 'linear',
+            delay,
+            duration: duration * ratio,
+            alternate: true,
+            composite: 'add',
+            keyframes: [
+                {
+                    translate: '0 calc(-1 * var(--motion-top, 0px))',
+                },
+                {
+                    translate: '0 calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px) - var(--motion-height, 100%))',
+                },
+            ],
+            get timing() {
+                return {
+                    iterationStart: top && parentHeight ? top / parentHeight : 0,
+                };
+            },
+        },
+    ];
+}
+export function getNames(_) {
+    return ['motion-dvd-x', 'motion-dvd-y'];
+}

package/dist/es/library/ongoing/Flash.js

@@ -0,0 +1,45 @@
+import { getEasing, getTimingFactor } from '../../utils';
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, _asWeb = false) {
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const easing = getEasing(options.easing || 'cubicInOut');
+    const timingFactor = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    const keyframes = [
+        {
+            offset: 0,
+            opacity: 1,
+            easing,
+        },
+        {
+            offset: 0.5 * timingFactor,
+            opacity: 0,
+            easing,
+        },
+        {
+            offset: timingFactor,
+            opacity: 1,
+        },
+        {
+            offset: 1,
+            opacity: 1,
+        },
+    ];
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: duration + delay,
+            keyframes,
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-flash-${timingFactor}`];
+}