@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -0,0 +1,57 @@
+import { getEasing, getTimingFactor, toKeyframeValue } from '../../utils';
+const POWER_EASING_MAP = {
+    soft: 'linear',
+    medium: 'quintInOut',
+    hard: 'backOut',
+};
+const DIRECTION_MAP = {
+    vertical: { x: '1', y: '0' },
+    horizontal: { x: '0', y: '1' },
+};
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'horizontal', power } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const offset = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    const rotationAxes = DIRECTION_MAP[direction];
+    const easing = (power && POWER_EASING_MAP[power]) || options.easing || 'linear';
+    const custom = {
+        '--motion-rotate-x': rotationAxes.x,
+        '--motion-rotate-y': rotationAxes.y,
+    };
+    const rotateStart = `rotate3d(${toKeyframeValue(custom, '--motion-rotate-x', asWeb)}, ${toKeyframeValue(custom, '--motion-rotate-y', asWeb)}, 0, 0deg)`;
+    const rotateEnd = `rotate3d(${toKeyframeValue(custom, '--motion-rotate-x', asWeb)}, ${toKeyframeValue(custom, '--motion-rotate-y', asWeb)}, 0, 360deg)`;
+    return [
+        {
+            ...options,
+            name,
+            delay: 0,
+            easing: 'linear',
+            duration: duration + delay,
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    transform: `perspective(800px) rotateZ(var(--comp-rotate-z, 0deg)) ${rotateStart}`,
+                    easing: getEasing(easing),
+                },
+                {
+                    offset,
+                    transform: `perspective(800px) rotateZ(var(--comp-rotate-z, 0deg)) ${rotateEnd}`,
+                },
+                {
+                    offset: 1,
+                    transform: `perspective(800px) rotateZ(var(--comp-rotate-z, 0deg)) ${rotateEnd}`,
+                },
+            ],
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-flip-${timingFactor}`];
+}

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

@@ -0,0 +1,121 @@
+import { getEasing, getEasingFamily, getTimingFactor, toKeyframeValue } from '../../utils';
+const POWER_TO_ROTATION_FACTOR_MAP = {
+    soft: 1,
+    medium: 2,
+    hard: 3,
+};
+const DIRECTION_MAP = {
+    top: {
+        rotation: { x: 1, y: 0 },
+        origin: { x: 0, y: -50 },
+    },
+    right: {
+        rotation: { x: 0, y: 1 },
+        origin: { x: 50, y: 0 },
+    },
+    bottom: {
+        rotation: { x: 1, y: 0 },
+        origin: { x: 0, y: 50 },
+    },
+    left: {
+        rotation: { x: 0, y: 1 },
+        origin: { x: -50, y: 0 },
+    },
+};
+const MIN_ROTATE_ANGLE = 15;
+const KEYFRAME_FACTORS = [
+    { fold: 1, frameFactor: 0.25 },
+    { fold: -0.7, frameFactor: 0.5 },
+    { fold: 0.6, frameFactor: 0.5 },
+    { fold: -0.3, frameFactor: 0.45 },
+    { fold: 0.2, frameFactor: 0.4 },
+    { fold: -0.05, frameFactor: 0.5 },
+    { fold: 0, frameFactor: 0.35 },
+];
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'top', power, angle = MIN_ROTATE_ANGLE } = options.namedEffect;
+    const easing = options.easing || 'cubicInOut';
+    const duration = options.duration || 1;
+    const delay = +(options.delay || 0);
+    const [name] = getNames(options);
+    const isResponsive = typeof power === 'undefined';
+    const { rotation, origin } = DIRECTION_MAP[direction];
+    const { x, y } = origin;
+    const ease = getEasingFamily(isResponsive ? easing : 'cubicInOut');
+    const rotateTransform = isResponsive
+        ? angle
+        : MIN_ROTATE_ANGLE * POWER_TO_ROTATION_FACTOR_MAP[power];
+    const totalDurationWithDelay = 3.2 * duration + delay;
+    const timingFactor = getTimingFactor(duration, totalDurationWithDelay - duration);
+    let currentOffset = 0;
+    // Create CSS custom properties for the fold configuration
+    const custom = {
+        '--motion-origin-x': `${x}%`,
+        '--motion-origin-y': `${y}%`,
+        '--motion-rotate-angle': `${rotateTransform}deg`,
+        '--motion-rotate-x': `${rotation.x}`,
+        '--motion-rotate-y': `${rotation.y}`,
+    };
+    const transformLeft = `rotateZ(var(--comp-rotate-z, 0deg)) translateX(${toKeyframeValue(custom, '--motion-origin-x', asWeb)}) translateY(${toKeyframeValue(custom, '--motion-origin-y', asWeb)}) perspective(800px)`;
+    const transformRight = `translateX(calc(-1 * ${toKeyframeValue(custom, '--motion-origin-x', asWeb)})) translateY(calc(-1 * ${toKeyframeValue(custom, '--motion-origin-y', asWeb)}))`;
+    const getTransform = (value) => `${transformLeft} rotateX(calc(${toKeyframeValue(custom, '--motion-rotate-x', asWeb)} * ${value} * ${rotateTransform}deg)) rotateY(calc(${toKeyframeValue(custom, '--motion-rotate-y', asWeb)} * ${value} * ${rotateTransform}deg)) ${transformRight}`;
+    // in case a delay is applied, animate a different sequence which decays to a stop
+    const keyframes = delay
+        ? KEYFRAME_FACTORS.map(({ fold, frameFactor }) => {
+            const keyframeOffset = currentOffset + frameFactor * timingFactor;
+            currentOffset = keyframeOffset;
+            return {
+                offset: keyframeOffset,
+                easing: getEasing('sineInOut'),
+                transform: getTransform(fold),
+            };
+        })
+        : [
+            {
+                offset: 0.25,
+                easing: getEasing(ease.inOut),
+                transform: getTransform(1),
+            },
+            {
+                offset: 0.75,
+                easing: getEasing(ease.in),
+                transform: getTransform(-1),
+            },
+        ];
+    const transform_0 = getTransform(0);
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: delay ? totalDurationWithDelay : duration,
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    easing: getEasing(ease.out),
+                    transform: transform_0,
+                },
+                ...keyframes,
+                {
+                    offset: 1,
+                    transform: transform_0,
+                },
+            ],
+        },
+    ];
+}
+export function getNames(options) {
+    const duration = options.duration || 1;
+    const delay = +(options.delay || 0);
+    if (!delay) {
+        return ['motion-fold'];
+    }
+    const totalDurationWithDelay = 3.2 * duration + delay;
+    const timingFactor = getTimingFactor(duration, totalDurationWithDelay - duration, true);
+    return [`motion-fold-${timingFactor}`];
+}

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

@@ -0,0 +1,51 @@
+import { getTimingFactor, toKeyframeValue, mapRange } from '../../utils';
+const POWER_TO_JELLO_FACTOR_MAP = {
+    soft: 1,
+    medium: 2,
+    hard: 4,
+};
+const SKEW_Y_KEYFRAMES = [
+    { keyframe: 24, skewY: 7 },
+    { keyframe: 38, skewY: -2 },
+    { keyframe: 58, skewY: 4 },
+    { keyframe: 80, skewY: -2 },
+    { keyframe: 100, skewY: 0 },
+];
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, intensity = 0.25 } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const [name] = getNames(options);
+    const timingFactor = getTimingFactor(duration, delay);
+    const responsiveJelloFactor = mapRange(0, 1, POWER_TO_JELLO_FACTOR_MAP.soft, POWER_TO_JELLO_FACTOR_MAP.hard, intensity);
+    const jelloFactor = (power && POWER_TO_JELLO_FACTOR_MAP[power]) || responsiveJelloFactor;
+    // Create CSS custom properties for the jello configuration
+    const custom = {
+        '--motion-skew-y': jelloFactor,
+    };
+    const keyframes = SKEW_Y_KEYFRAMES.map(({ keyframe, skewY }) => {
+        const offset = (keyframe / 100) * timingFactor;
+        return {
+            offset,
+            transform: `rotateZ(var(--comp-rotate-z, 0deg)) skewY(calc(${toKeyframeValue(custom, '--motion-skew-y', asWeb)} * ${skewY}deg))`,
+        };
+    });
+    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-jello-${timingFactor}`];
+}

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

@@ -0,0 +1,61 @@
+import { getTimingFactor, toKeyframeValue, mapRange } from '../../utils';
+const TRANSLATE_KEYFRAMES = [
+    { keyframe: 17, translate: 7 },
+    { keyframe: 32, translate: 25 },
+    { keyframe: 48, translate: 8 },
+    { keyframe: 56, translate: 11 },
+    { keyframe: 66, translate: 25 },
+    { keyframe: 83, translate: 4 },
+    { keyframe: 100, translate: 0 },
+];
+const POWER_TO_POKE_FACTOR_MAP = {
+    soft: 1,
+    medium: 2,
+    hard: 4,
+};
+const DIRECTION_MAP = {
+    top: { x: 0, y: -1 },
+    bottom: { x: 0, y: 1 },
+    right: { x: 1, y: 0 },
+    left: { x: -1, y: 0 },
+};
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, intensity = 0.5, direction = 'right' } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = +(options.delay || 0);
+    const { x, y } = DIRECTION_MAP[direction];
+    const timingFactor = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    const responsivePokeFactor = mapRange(0, 1, POWER_TO_POKE_FACTOR_MAP.soft, POWER_TO_POKE_FACTOR_MAP.hard, intensity);
+    const pokeFactor = power ? POWER_TO_POKE_FACTOR_MAP[power] : responsivePokeFactor;
+    // Create CSS custom properties for the poke configuration
+    const custom = {
+        '--motion-translate-x': x * pokeFactor,
+        '--motion-translate-y': y * pokeFactor,
+    };
+    const keyframes = TRANSLATE_KEYFRAMES.map(({ keyframe, translate }) => {
+        const translateValue = `calc(${toKeyframeValue(custom, '--motion-translate-x', asWeb)} * ${translate}px) calc(${toKeyframeValue(custom, '--motion-translate-y', asWeb)} * ${translate}px)`;
+        return {
+            offset: (keyframe / 100) * timingFactor,
+            translate: translateValue,
+        };
+    });
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: duration + delay,
+            custom,
+            keyframes,
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-poke-${timingFactor}`];
+}

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

@@ -0,0 +1,58 @@
+import { getTimingFactor, toKeyframeValue, mapRange } from '../../utils';
+const POWER_TO_PULSE_OFFSET_MAP = {
+    soft: 0,
+    medium: 0.06,
+    hard: 0.12,
+};
+const SCALE_KEYFRAMES = [
+    { keyframe: 27, scale: 0.96 },
+    { keyframe: 45, scale: 1 },
+    { keyframe: 72, scale: 0.93 },
+    { keyframe: 100, scale: 1 },
+];
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, intensity = 0 } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const timingFactor = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    const responsivePulseOffset = mapRange(0, 1, POWER_TO_PULSE_OFFSET_MAP.soft, POWER_TO_PULSE_OFFSET_MAP.hard, intensity);
+    const pulseOffset = typeof power !== 'undefined' ? POWER_TO_PULSE_OFFSET_MAP[power] : responsivePulseOffset;
+    // Create CSS custom properties for the pulse configuration
+    const custom = {
+        '--motion-pulse-offset': pulseOffset,
+    };
+    const keyframes = SCALE_KEYFRAMES.map(({ keyframe, scale }) => {
+        const offset = (keyframe / 100) * timingFactor;
+        return {
+            offset,
+            transform: `scale(${scale < 1
+                ? `calc(${scale} - ${toKeyframeValue(custom, '--motion-pulse-offset', asWeb)})`
+                : '1'})`,
+        };
+    });
+    if (timingFactor < 1) {
+        keyframes.push({
+            offset: 1,
+            transform: 'scale(1)',
+        });
+    }
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: duration + delay,
+            custom,
+            keyframes,
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-pulse-${timingFactor}`];
+}

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

@@ -0,0 +1,60 @@
+import { getTimingFactor, roundNumber, toKeyframeValue, mapRange } from '../../utils';
+const POWER_TO_RUBBER_OFFSET_MAP = {
+    soft: 0,
+    medium: 0.05,
+    hard: 0.1,
+};
+const SCALE_KEYFRAMES = [
+    { keyframe: 45, scaleX: 1.03, scaleY: 0.93 },
+    { keyframe: 56, scaleX: 0.9, scaleY: 1.03 },
+    { keyframe: 66, scaleX: 1.02, scaleY: 0.96 },
+    { keyframe: 78, scaleX: 0.98, scaleY: 1.02 },
+    { keyframe: 89, scaleX: 1.005, scaleY: 0.9995 },
+    { keyframe: 100, scaleX: 1, scaleY: 1 },
+];
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, intensity = 0.5 } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const timingFactor = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    const responsiveRubberOffset = mapRange(0, 1, POWER_TO_RUBBER_OFFSET_MAP.soft, POWER_TO_RUBBER_OFFSET_MAP.hard, intensity);
+    const rubberOffset = typeof power !== 'undefined' ? POWER_TO_RUBBER_OFFSET_MAP[power] : responsiveRubberOffset;
+    // Create CSS custom properties for the rubber configuration
+    const custom = {};
+    const keyframes = SCALE_KEYFRAMES.map(({ keyframe, scaleX, scaleY }, index) => {
+        const isLastKeyframe = index === SCALE_KEYFRAMES.length - 1;
+        const isEvenKeyframe = index % 2 === 0;
+        const offset = rubberOffset * (isLastKeyframe ? 0 : isEvenKeyframe ? 1 : -0.5);
+        const adjustedScaleX = roundNumber(scaleX + offset, 4);
+        const adjustedScaleY = roundNumber(scaleY - offset, 4);
+        // Create custom property keys for this keyframe
+        const scaleXKey = `--motion-scale-x-${keyframe}`;
+        const scaleYKey = `--motion-scale-y-${keyframe}`;
+        // Add the scale values to custom properties
+        custom[scaleXKey] = adjustedScaleX;
+        custom[scaleYKey] = adjustedScaleY;
+        return {
+            offset: (keyframe / 100) * timingFactor,
+            transform: `rotateZ(var(--comp-rotate-z, 0deg)) scale(${toKeyframeValue(custom, scaleXKey, asWeb)}, ${toKeyframeValue(custom, scaleYKey, asWeb)})`,
+        };
+    });
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: duration + delay,
+            custom,
+            keyframes,
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-rubber-${timingFactor}`];
+}

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

@@ -0,0 +1,50 @@
+import { getEasing, getTimingFactor, toKeyframeValue } from '../../utils';
+const POWER_EASING_MAP = {
+    soft: 'linear',
+    medium: 'quintInOut',
+    hard: 'backOut',
+};
+const DIRECTION_MAP = {
+    clockwise: -1,
+    'counter-clockwise': 1,
+};
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, direction = 'clockwise' } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const timingFactor = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    const easing = (power && POWER_EASING_MAP[power]) || options.easing || 'linear';
+    const transformRotate = (DIRECTION_MAP[direction] > 0 ? 1 : -1) * 360;
+    const custom = {
+        '--motion-rotate-start': `calc(var(--comp-rotate-z, 0deg) + ${transformRotate}deg)`,
+    };
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: duration + delay,
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    easing: getEasing(easing),
+                    rotate: toKeyframeValue(custom, '--motion-rotate-start', asWeb),
+                },
+                {
+                    offset: timingFactor,
+                    rotate: `var(--comp-rotate-z, 0deg)`,
+                },
+            ],
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-spin-${timingFactor}`];
+}

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

@@ -0,0 +1,98 @@
+import { getEasing, getEasingFamily, getTimingFactor, toKeyframeValue } from '../../utils';
+const POWER_TO_SWING_FACTOR_MAP = {
+    soft: 1,
+    medium: 2,
+    hard: 3,
+};
+const DIRECTION_MAP = {
+    top: { x: 0, y: -1 },
+    right: { x: 1, y: 0 },
+    bottom: { x: 0, y: 1 },
+    left: { x: -1, y: 0 },
+};
+const TRANSLATE_DISTANCE = 50;
+const FACTORS_SEQUENCE = [
+    { factor: 1, timeFactor: 0.25 },
+    { factor: -1, timeFactor: 0.5 },
+    { factor: 0.6, timeFactor: 0.5 },
+    { factor: -0.3, timeFactor: 0.5 },
+    { factor: 0.2, timeFactor: 0.5 },
+    { factor: -0.05, timeFactor: 0.5 },
+    { factor: 0, timeFactor: 0.4 },
+];
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, swing = 20, direction = 'top' } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const easing = options.easing || 'sineInOut';
+    const ease = getEasingFamily(easing);
+    const [name] = getNames(options);
+    const swingDeg = typeof power !== 'undefined' ? 20 * POWER_TO_SWING_FACTOR_MAP[power] : swing;
+    const { x, y } = DIRECTION_MAP[direction];
+    const totalDuration = 3.55 * duration + delay;
+    const timingFactor = getTimingFactor(duration, totalDuration - duration);
+    // Create CSS custom properties for the swing configuration
+    const custom = {
+        '--motion-swing-deg': `${swingDeg}deg`,
+        '--motion-trans-x': `${x * TRANSLATE_DISTANCE}%`,
+        '--motion-trans-y': `${y * TRANSLATE_DISTANCE}%`,
+        '--motion-ease-in': getEasing(ease.in),
+        '--motion-ease-inout': getEasing(ease.inOut),
+        '--motion-ease-out': getEasing(ease.out),
+    };
+    const translateBefore = `translate(${toKeyframeValue(custom, '--motion-trans-x', asWeb)}, ${toKeyframeValue(custom, '--motion-trans-y', asWeb)})`;
+    const translateAfter = `translate(calc(${toKeyframeValue(custom, '--motion-trans-x', asWeb)} * -1), calc(${toKeyframeValue(custom, '--motion-trans-y', asWeb)} * -1))`;
+    let currentOffset = 0;
+    // in case a delay is applied, animate a different sequence which decays to a stop
+    const keyframes = delay
+        ? FACTORS_SEQUENCE.map(({ factor, timeFactor }) => {
+            const keyframeOffset = currentOffset + timeFactor * timingFactor;
+            currentOffset = keyframeOffset;
+            return {
+                offset: keyframeOffset,
+                easing: toKeyframeValue(custom, '--motion-ease-inout', asWeb),
+                transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${toKeyframeValue(custom, '--motion-swing-deg', asWeb)} * ${factor})) ${translateAfter}`,
+            };
+        })
+        : [
+            {
+                offset: 0.25,
+                easing: toKeyframeValue(custom, '--motion-ease-inout', asWeb),
+                transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(${toKeyframeValue(custom, '--motion-swing-deg', asWeb)}) ${translateAfter}`,
+            },
+            {
+                offset: 0.75,
+                easing: toKeyframeValue(custom, '--motion-ease-in', asWeb),
+                transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${toKeyframeValue(custom, '--motion-swing-deg', asWeb)} * -1)) ${translateAfter}`,
+            },
+        ];
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: delay ? totalDuration : duration,
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    easing: toKeyframeValue(custom, '--motion-ease-out', asWeb),
+                    transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`,
+                },
+                ...keyframes,
+                {
+                    offset: 1,
+                    transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`,
+                },
+            ],
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-swing-${timingFactor}`];
+}

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

@@ -0,0 +1,60 @@
+import { getTimingFactor, roundNumber, toKeyframeValue, mapRange } from '../../utils';
+const POWER_TO_WIGGLE_FACTOR_MAP = {
+    soft: 1,
+    medium: 2,
+    hard: 4,
+};
+const TRANSFORM_KEYFRAMES = [
+    { keyframe: 18, transY: -10, accRotate: 10 },
+    { keyframe: 35, transY: 0, accRotate: -18 },
+    { keyframe: 53, transY: 0, accRotate: 14 },
+    { keyframe: 73, transY: 0, accRotate: -10 },
+    { keyframe: 100, transY: 0, accRotate: 4 },
+];
+export function web(options, _dom) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, intensity = 0.5 } = options.namedEffect;
+    const duration = options.duration || 1;
+    const delay = options.delay || 0;
+    const timingFactor = getTimingFactor(duration, delay);
+    const [name] = getNames(options);
+    const responsiveWiggleFactor = mapRange(0, 1, POWER_TO_WIGGLE_FACTOR_MAP.soft, POWER_TO_WIGGLE_FACTOR_MAP.hard, intensity);
+    const wiggleFactor = (power && POWER_TO_WIGGLE_FACTOR_MAP[power]) || responsiveWiggleFactor;
+    let currentRotation = 0;
+    // Create CSS custom properties for the wiggle configuration
+    const custom = {
+        '--motion-wiggle-factor': wiggleFactor,
+    };
+    const keyframes = TRANSFORM_KEYFRAMES.map(({ keyframe, transY, accRotate }) => {
+        const offset = (keyframe / 100) * timingFactor;
+        const rotateValue = `calc(var(--comp-rotate-z, 0deg) + ${roundNumber(currentRotation + accRotate * wiggleFactor)}deg)`;
+        const translateYValue = `${transY * wiggleFactor}px`;
+        const rotateKey = `--motion-rotate-${keyframe}`;
+        const translateYKey = `--motion-translate-y-${keyframe}`;
+        // For non-web usage, add the values to custom properties
+        custom[rotateKey] = rotateValue;
+        custom[translateYKey] = translateYValue;
+        currentRotation += accRotate * wiggleFactor;
+        return {
+            offset,
+            transform: `rotate(${toKeyframeValue(custom, rotateKey, asWeb)}) translateY(${toKeyframeValue(custom, translateYKey, asWeb)})`,
+        };
+    });
+    return [
+        {
+            ...options,
+            name,
+            easing: 'linear',
+            delay: 0,
+            duration: duration + delay,
+            custom,
+            keyframes,
+        },
+    ];
+}
+export function getNames(options) {
+    const timingFactor = getTimingFactor(options.duration, options.delay, true);
+    return [`motion-wiggle-${timingFactor}`];
+}

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

@@ -1,6 +1,5 @@
 import * as Bounce from './Bounce';
 import * as Breathe from './Breathe';
-// import * as Blink from './Blink';
 import * as Cross from './Cross';
 // import * as DVD from './DVD';
 import * as Flash from './Flash';
@@ -14,20 +13,18 @@ import * as Spin from './Spin';
 import * as Swing from './Swing';
 import * as Wiggle from './Wiggle';
 export const ongoingAnimations = {
-  Bounce,
-  Breathe,
-  // Blink,
-  Cross,
-  // DVD,
-  Flash,
-  Flip,
-  Fold,
-  Jello,
-  Poke,
-  Rubber,
-  Pulse,
-  Spin,
-  Swing,
-  Wiggle
+    Bounce,
+    Breathe,
+    Cross,
+    // DVD,
+    Flash,
+    Flip,
+    Fold,
+    Jello,
+    Poke,
+    Rubber,
+    Pulse,
+    Spin,
+    Swing,
+    Wiggle,
 };
-//# sourceMappingURL=index.js.map