@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/scroll/SkewPanScroll.js

@@ -0,0 +1,78 @@
+const POWER_MAP = {
+    soft: { skewX: 10 },
+    medium: { skewX: 17 },
+    hard: { skewX: 24 },
+};
+const DIRECTION_MAP = {
+    right: -1,
+    left: 1,
+};
+const RANGES_MAP = {
+    in: (skewX, startX, _endX) => ({
+        fromValues: { skewX, startX },
+        toValues: { skewX: 0, endX: 0 },
+    }),
+    out: (skewX, startX, _endX) => ({
+        fromValues: { skewX: 0, startX: 0 },
+        toValues: { skewX: -skewX, endX: startX },
+    }),
+    continuous: (skewX, startX, endX) => ({
+        fromValues: { skewX, startX },
+        toValues: { skewX: -skewX, endX },
+    }),
+};
+const POSITIONS = {
+    left: {
+        startX: `calc(var(--motion-left, calc(100vw - 100%)) * -1 - 100%)`,
+        endX: `calc(100vw - var(--motion-left, 0px))`,
+    },
+    right: {
+        startX: `calc(100vw - var(--motion-left, 0px))`,
+        endX: `calc(var(--motion-left, calc(100vw - 100%)) * -1 - 100%)`,
+    },
+};
+export default function create(options, dom) {
+    const { skew = 10, direction = 'right', power, range = 'in', } = options.namedEffect;
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const skewX = (power && POWER_MAP[power] ? POWER_MAP[power].skewX : skew) * DIRECTION_MAP[direction];
+    const { startX, endX } = POSITIONS[direction];
+    const { fromValues, toValues } = RANGES_MAP[range](skewX, startX, endX);
+    let left = 0;
+    if (dom) {
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            left = target.getBoundingClientRect().left;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-left', `${left}px`);
+        });
+    }
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            keyframes: [
+                {
+                    transform: `translateX(${fromValues.startX}) skewX(${fromValues.skewX}deg) rotate(var(--comp-rotate-z, 0))`,
+                },
+                {
+                    transform: `translateX(${toValues.endX}) skewX(${toValues.skewX}deg) rotate(var(--comp-rotate-z, 0))`,
+                },
+            ],
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     transform: translateX(<fromValue.startX>) skewX(<fromValue.skew>) rotate(<rotation>);
+     *   }
+     *   to {
+     *     transform: translateX(<toValue.endX>) skewX(<toValue.skew>) rotate(<rotation>);
+     *   }
+     * }
+     */
+}

package/dist/es/library/scroll/SlideScroll.js

@@ -0,0 +1,105 @@
+import { getAdjustedDirection, getClipPolygonParams } from '../../utils';
+const DIRECTIONS = ['bottom', 'left', 'top', 'right'];
+const OPPOSITE_DIRECTION_MAP = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+const DIRECTION_TRANSLATION_MAP = {
+    top: { x: '0', y: '-100%' },
+    right: { x: '100%', y: '0' },
+    bottom: { x: '0', y: '100%' },
+    left: { x: '-100%', y: '0' },
+};
+const initialClip = getClipPolygonParams({ direction: 'initial' });
+const KEYFRAMES_RANGE_MAP = {
+    in: (clip, translate) => [
+        {
+            clipPath: `var(--motion-clip-from, ${clip.from})`,
+            transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`,
+        },
+        {
+            clipPath: initialClip,
+            transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`,
+        },
+    ],
+    out: (clip, translate) => [
+        {
+            clipPath: initialClip,
+            transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`,
+        },
+        {
+            clipPath: `var(--motion-clip-from, ${clip.from})`,
+            transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`,
+        },
+    ],
+    continuous: (clip, translate) => [
+        {
+            clipPath: `var(--motion-clip-from, ${clip.from})`,
+            transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`,
+        },
+        {
+            clipPath: initialClip,
+            transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`,
+        },
+        {
+            clipPath: `var(--motion-clip-to, ${clip.to})`,
+            transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.to.x}, ${translate.to.y})`,
+        },
+    ],
+};
+export default function create(options, dom) {
+    const { direction = 'bottom', range = 'in' } = options.namedEffect;
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const oppositeDirection = OPPOSITE_DIRECTION_MAP[direction];
+    const keyframes = KEYFRAMES_RANGE_MAP[range]({
+        from: getClipPolygonParams({
+            direction: oppositeDirection,
+        }),
+        to: getClipPolygonParams({
+            direction,
+        }),
+    }, {
+        from: DIRECTION_TRANSLATION_MAP[direction],
+        to: DIRECTION_TRANSLATION_MAP[oppositeDirection],
+    });
+    if (dom) {
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rotation = parseInt(getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0', 10);
+            dom.mutate(() => {
+                const adjDirection = getAdjustedDirection(DIRECTIONS, direction, rotation);
+                target.style.setProperty('--motion-clip-from', getClipPolygonParams({
+                    direction: OPPOSITE_DIRECTION_MAP[adjDirection],
+                }));
+                target.style.setProperty('--motion-clip-to', getClipPolygonParams({
+                    direction: adjDirection,
+                }));
+            });
+        });
+    }
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            keyframes,
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     clip-path: <clip.from>;
+     *     translate: <translate.from.x> <translate.from.y>;
+     *   }
+     *   to {
+     *     clip-path: none;
+     *     translate: 0 0;
+     *   }
+     * }
+     */
+}

package/dist/es/library/scroll/Spin3dScroll.js

@@ -0,0 +1,92 @@
+const MAX_Y_TRAVEL = 40;
+const POWER_MAP = {
+    soft: { rotationZ: 45, travelY: 0 },
+    medium: { rotationZ: 100, travelY: 0.5 },
+    hard: { rotationZ: 200, travelY: 1 },
+};
+const RANGES_MAP = {
+    in: (rotation, travelY) => ({
+        fromValues: {
+            rotationX: -2 * rotation,
+            rotationY: -rotation,
+            rotationZ: -rotation,
+            travel: travelY,
+        },
+        toValues: {
+            rotationX: 0,
+            rotationY: 0,
+            rotationZ: 0,
+            travel: 0,
+        },
+    }),
+    out: (rotation, travelY) => ({
+        fromValues: {
+            rotationX: 0,
+            rotationY: 0,
+            rotationZ: 0,
+            travel: 0,
+        },
+        toValues: {
+            rotationX: rotation * 3,
+            rotationY: rotation * 2,
+            rotationZ: rotation,
+            travel: -travelY,
+        },
+    }),
+    continuous: (rotation, travelY) => ({
+        fromValues: {
+            rotationX: -2 * rotation,
+            rotationY: -rotation,
+            rotationZ: -rotation,
+            travel: travelY,
+        },
+        toValues: {
+            rotationX: rotation * 1.8,
+            rotationY: rotation,
+            rotationZ: 2 * rotation,
+            travel: -travelY,
+        },
+    }),
+};
+function getScrubOffsets({ power, range = 'in', speed = 0 }) {
+    const offset = (power && POWER_MAP[power] ? POWER_MAP[power].travelY : Math.abs(speed)) * MAX_Y_TRAVEL;
+    return {
+        start: range === 'out' ? '0px' : `${-offset}vh`,
+        end: range === 'in' ? '0px' : `${offset}vh`,
+    };
+}
+export default function create(options) {
+    const { rotate = -100, power, range = 'in', speed = 0 } = options.namedEffect;
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const initialParams = power && POWER_MAP[power] ? POWER_MAP[power] : { rotationZ: rotate, travelY: speed };
+    const { fromValues, toValues } = RANGES_MAP[range](initialParams.rotationZ, initialParams.travelY * -MAX_Y_TRAVEL);
+    const { start: startOffsetAdd, end: endOffsetAdd } = getScrubOffsets(options.namedEffect);
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            startOffsetAdd,
+            endOffsetAdd,
+            keyframes: [
+                {
+                    transform: `perspective(1000px) translateY(${fromValues.travel}vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + ${fromValues.rotationZ}deg)) rotateY(${fromValues.rotationY}deg) rotateX(${fromValues.rotationX}deg)`,
+                },
+                {
+                    transform: `perspective(1000px) translateY(${toValues.travel}vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + ${toValues.rotationZ}deg)) rotateY(${toValues.rotationY}deg) rotateX(${toValues.rotationX}deg)`,
+                },
+            ],
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     transform: perspective(1000px) translateY(<fromValue.travel>vh) rotateZ(<fromValue.rotateZ> + <rotation>) rotateY(<fromValue.rotateY>deg) rotateX(<fromValue.rotateX>deg);
+     *   }
+     *   to {
+     *     transform: perspective(1000px) translateY(<toValue.travel>vh) rotateZ(<fromValue.rotateZ> + <rotation>) rotateY(<toValue.rotateY>deg) rotateX(<toValue.rotateX>deg);
+     *   }
+     * }
+     */
+}

package/dist/es/library/scroll/SpinScroll.js

@@ -0,0 +1,45 @@
+const POWER_MAP = {
+    soft: 1,
+    medium: 0.7,
+    hard: 0.4,
+};
+const DIRECTION_MAP = {
+    clockwise: 1,
+    'counter-clockwise': -1,
+};
+export default function create(options) {
+    const { spins = 0.15, scale = 1, direction = 'clockwise', power, range = 'in', } = options.namedEffect;
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const spinDirection = DIRECTION_MAP[direction];
+    const rotationZ = spins * 360;
+    const scaleFactor = power && POWER_MAP[power] ? POWER_MAP[power] : scale;
+    const isIn = range === 'in';
+    const fromValue = isIn ? -rotationZ : range === 'out' ? 0 : -rotationZ / 2;
+    const toValue = isIn ? 0 : range === 'out' ? rotationZ : rotationZ / 2;
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            keyframes: [
+                {
+                    transform: `scale(${isIn ? scaleFactor : 1}) rotate(calc(var(--comp-rotate-z, 0deg) + ${fromValue * spinDirection}deg))`,
+                },
+                {
+                    transform: `scale(${isIn ? 1 : scaleFactor}) rotate(calc(var(--comp-rotate-z, 0deg) + ${toValue * spinDirection}deg))`,
+                },
+            ],
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     transform: scale(<fromValues.scale>) rotate(<rotation> - <fromValue.rotate * spinDirection>);
+     *   }
+     *   to {
+     *     transform: scale(<toValues.scale>) rotate(<rotation> + <toValue.rotate * spinDirection>);
+     *   }
+     * }
+     */
+}

package/dist/es/library/scroll/StretchScroll.js

@@ -0,0 +1,81 @@
+import { cssEasings as easings } from '../../easings';
+const POWER_MAP = {
+    soft: { scaleY: 1.2, scaleX: 0.8 },
+    medium: { scaleY: 1.5, scaleX: 0.6 },
+    hard: { scaleY: 2, scaleX: 0.4 },
+};
+const KEYFRAMES_RANGE_MAP = {
+    in: (scaleX, scaleY) => [
+        {
+            scale: `${scaleX} ${scaleY}`,
+            translate: `0 ${100 * (scaleY - 1)}%`,
+        },
+        {
+            scale: '1 1',
+            translate: '0 0',
+        },
+    ],
+    out: (scaleX, scaleY) => [
+        {
+            scale: '1 1',
+            translate: '0 0',
+        },
+        {
+            scale: `${scaleX} ${scaleY}`,
+            translate: `0 ${100 * (1 - scaleY)}%`,
+        },
+    ],
+    continuous: (scaleX, scaleY) => [
+        {
+            scale: `${scaleX} ${scaleY}`,
+            translate: `0 ${100 * (scaleY - 1)}%`,
+            easing: easings.backInOut,
+        },
+        {
+            scale: '1 1',
+            translate: '0 0',
+            easing: easings.backInOut,
+        },
+        {
+            scale: `${scaleX} ${scaleY}`,
+            translate: `0 ${100 * (1 - scaleY)}%`,
+        },
+    ],
+};
+const opacityKeyframesMap = {
+    in: [
+        { opacity: 0, offset: 0 },
+        { opacity: 1, offset: 0.65 },
+    ],
+    out: [
+        { opacity: 1, offset: 0.35 },
+        { opacity: 0, offset: 1 },
+    ],
+    continuous: [
+        { opacity: 0, offset: 0 },
+        { opacity: 1, offset: 0.325 },
+        { opacity: 1, offset: 0.7 },
+        { opacity: 0, offset: 1 },
+    ],
+};
+export default function create(options) {
+    const { power, stretch = 0.6, range = 'out' } = options.namedEffect;
+    const easing = range === 'continuous' ? 'linear' : 'backInOut';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const { scaleX, scaleY } = power && POWER_MAP[power] ? POWER_MAP[power] : { scaleX: 1 - stretch, scaleY: 1 + stretch };
+    const animations = KEYFRAMES_RANGE_MAP[range](scaleX, scaleY);
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            keyframes: animations,
+        },
+        {
+            ...options,
+            fill,
+            easing,
+            keyframes: opacityKeyframesMap[range],
+        },
+    ];
+}

package/dist/es/library/scroll/TiltScroll.js

@@ -0,0 +1,118 @@
+import { cssEasings as easings } from '../../easings';
+const MAX_Y_TRAVEL = 40;
+const [ROTATION_X, ROTATION_Y, ROTATION_Z] = [10, 25, 25];
+const [UP, DOWN, ORIGINAL_LAYOUT] = [-1, 1, 0];
+const TRANSLATE_Y_POWER_MAP = {
+    soft: 0,
+    medium: 0.5,
+    hard: 1,
+};
+const DIRECTIONS_MAP = {
+    right: 1,
+    left: -1,
+};
+const RANGES_MAP = {
+    in: {
+        from: {
+            x: -1,
+            y: -1,
+            z: 1,
+            transY: DOWN,
+        },
+        to: {
+            x: 0,
+            y: 0,
+            z: 0,
+            transY: ORIGINAL_LAYOUT,
+        },
+    },
+    out: {
+        from: {
+            x: 0,
+            y: 0,
+            z: 0,
+            transY: ORIGINAL_LAYOUT,
+        },
+        to: {
+            x: -1,
+            y: -1,
+            z: 1,
+            transY: UP,
+        },
+    },
+    continuous: {
+        from: {
+            x: -1,
+            y: -1,
+            z: -1,
+            transY: DOWN,
+        },
+        to: {
+            x: 1,
+            y: 0.5,
+            z: 1.25,
+            transY: UP,
+        },
+    },
+};
+function getYTravel(distance, power) {
+    return ((power && power in TRANSLATE_Y_POWER_MAP ? TRANSLATE_Y_POWER_MAP[power] : distance) *
+        MAX_Y_TRAVEL);
+}
+function getScrubOffsets({ power, range = 'in', distance = 0 }) {
+    const offset = Math.abs(getYTravel(distance, power));
+    return {
+        start: range === 'out' ? '0px' : `${-offset}vh`,
+        end: range === 'in' ? '0px' : `${offset}vh`,
+    };
+}
+export default function create(options) {
+    const { power, distance = 0, range = 'in', direction = 'right', } = options.namedEffect;
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const { from, to } = RANGES_MAP[range];
+    const dir = DIRECTIONS_MAP[direction];
+    const rotateZFrom = Math.abs(from.z) * ROTATION_Z * dir * (from.z < 0 ? -1 : 1);
+    const rotateZTo = Math.abs(to.z) * ROTATION_Z * dir * (to.z < 0 ? -1 : 1);
+    const travelY = getYTravel(distance, power);
+    const travelYFrom = travelY * from.transY;
+    const travelYTo = travelY * to.transY;
+    const rotationXFrom = from.x * ROTATION_X;
+    const rotationYFrom = from.y * ROTATION_Y;
+    const rotationXTo = to.x * ROTATION_X;
+    const rotationYTo = to.y * ROTATION_Y;
+    const { start: startOffsetAdd, end: endOffsetAdd } = getScrubOffsets(options.namedEffect);
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            startOffsetAdd,
+            endOffsetAdd,
+            keyframes: [
+                {
+                    transform: `perspective(400px) translateY(${travelYFrom}vh) rotateX(${rotationXFrom}deg) rotateY(${rotationYFrom}deg)`,
+                },
+                {
+                    transform: `perspective(400px) translateY(${travelYTo}vh) rotateX(${rotationXTo}deg) rotateY(${rotationYTo}deg)`,
+                },
+            ],
+        },
+        {
+            ...options,
+            fill,
+            easing: easings.sineInOut,
+            startOffsetAdd,
+            endOffsetAdd,
+            composite: 'add', // add this animation on top of the previous one
+            keyframes: [
+                {
+                    transform: `rotate(calc(var(--comp-rotate-z, 0deg) + ${rotateZFrom}deg))`,
+                },
+                {
+                    transform: `rotate(calc(var(--comp-rotate-z, 0deg) + ${rotateZTo}deg))`,
+                },
+            ],
+        },
+    ];
+}

package/dist/es/library/scroll/TurnScroll.js

@@ -0,0 +1,96 @@
+const ELEMENT_ROTATION = 45;
+const POWER_MAP = {
+    soft: { scaleFrom: 1, scaleTo: 1 },
+    medium: { scaleFrom: 0.7, scaleTo: 1.3 },
+    hard: { scaleFrom: 0.4, scaleTo: 1.6 },
+};
+const ROTATE_DIRECTION_MAP = {
+    clockwise: 1,
+    'counter-clockwise': -1,
+};
+const TRANSLATE_X_MAP = {
+    left: {
+        startX: `calc(-1 * var(--motion-left, calc(100vw - 100%)) - 100%)`,
+        endX: `calc(100vw - var(--motion-left, 0px))`,
+    },
+    right: {
+        startX: `calc(100vw - var(--motion-left, 0px))`,
+        endX: `calc(-1 * var(--motion-left, calc(100vw - 100%)) - 100%)`,
+    },
+};
+const RANGES_MAP = {
+    in: (rotate, scale, travel) => ({
+        fromValues: {
+            rotation: -rotate,
+            scale: scale.scaleFrom,
+            translate: travel.startX,
+        },
+        toValues: { rotation: 0, scale: 1, translate: '0px' },
+    }),
+    out: (rotate, scale, travel) => ({
+        fromValues: { rotation: 0, scale: 1, translate: '0px' },
+        toValues: {
+            rotation: rotate,
+            scale: scale.scaleFrom,
+            translate: travel.endX,
+        },
+    }),
+    continuous: (rotate, scale, travel) => ({
+        fromValues: {
+            rotation: -rotate,
+            scale: scale.scaleFrom,
+            translate: travel.startX,
+        },
+        toValues: {
+            rotation: rotate,
+            scale: scale.scaleTo,
+            translate: travel.endX,
+        },
+    }),
+};
+export default function create(options, dom) {
+    const { power, spin = 'clockwise', direction = 'right', scale = 1, range = 'in', } = options.namedEffect;
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const transX = TRANSLATE_X_MAP[direction];
+    const rotateZ = ELEMENT_ROTATION * ROTATE_DIRECTION_MAP[spin];
+    const scaleFactors = power && POWER_MAP[power] ? POWER_MAP[power] : { scaleFrom: scale, scaleTo: scale };
+    const { fromValues, toValues } = RANGES_MAP[range](rotateZ, scaleFactors, transX);
+    let left = 0;
+    if (dom) {
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            left = target.getBoundingClientRect().left;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-left', `${left}px`);
+        });
+    }
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            keyframes: [
+                {
+                    transform: `translateX(${fromValues.translate}) scale(${fromValues.scale}) rotate(calc(var(--comp-rotate-z, 0deg) + ${fromValues.rotation}deg))`,
+                },
+                {
+                    transform: `translateX(${toValues.translate}) scale(${toValues.scale}) rotate(calc(var(--comp-rotate-z, 0deg) + ${toValues.rotation}deg))`,
+                },
+            ],
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     transform: translateX(<fromValues.position>) scale(<fromValues.scale>) rotate(calc(<rotation> - <fromValues.rotation>));
+     *   }
+     *   to {
+     *     transform: translateX(<toValues.position>) scale(<toValues.scale>) rotate(calc(<rotation> + <toValues.rotation>));
+     *   }
+     * }
+     */
+}

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

@@ -18,24 +18,23 @@ import StretchScroll from './StretchScroll';
 import TiltScroll from './TiltScroll';
 import TurnScroll from './TurnScroll';
 export const scrollAnimations = {
-  ArcScroll,
-  BlurScroll,
-  FadeScroll,
-  FlipScroll,
-  GrowScroll,
-  MoveScroll,
-  PanScroll,
-  ParallaxScroll,
-  RevealScroll,
-  ShapeScroll,
-  ShuttersScroll,
-  ShrinkScroll,
-  SkewPanScroll,
-  SlideScroll,
-  Spin3dScroll,
-  SpinScroll,
-  StretchScroll,
-  TiltScroll,
-  TurnScroll
+    ArcScroll,
+    BlurScroll,
+    FadeScroll,
+    FlipScroll,
+    GrowScroll,
+    MoveScroll,
+    PanScroll,
+    ParallaxScroll,
+    RevealScroll,
+    ShapeScroll,
+    ShuttersScroll,
+    ShrinkScroll,
+    SkewPanScroll,
+    SlideScroll,
+    Spin3dScroll,
+    SpinScroll,
+    StretchScroll,
+    TiltScroll,
+    TurnScroll,
 };
-//# sourceMappingURL=index.js.map