@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/easings.js

@@ -0,0 +1,218 @@
+/**
+ * @file Easing functions as defined by Robert Penner.
+ * @example A playground I made https://codepen.io/tombigel/pen/eYLLVRg
+ */
+/**
+ * Linear easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const linear = (t) => t;
+/**
+ * Sine-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const sineIn = (t) => 1 - Math.cos((t * Math.PI) / 2);
+/**
+ * Sine-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const sineOut = (t) => Math.sin((t * Math.PI) / 2);
+/**
+ * Sine-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const sineInOut = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
+/**
+ * Quadratic-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quadIn = (t) => t ** 2;
+/**
+ * Quadratic-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quadOut = (t) => 1 - (1 - t) ** 2;
+/**
+ * Quadratic-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quadInOut = (t) => (t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2);
+/**
+ * Cubic-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const cubicIn = (t) => t ** 3;
+/**
+ * Cubic-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const cubicOut = (t) => 1 - (1 - t) ** 3;
+/**
+ * Cubic-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const cubicInOut = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);
+/**
+ * Quartic-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quartIn = (t) => t ** 4;
+/**
+ * Quartic-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quartOut = (t) => 1 - (1 - t) ** 4;
+/**
+ * Quartic-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quartInOut = (t) => (t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2);
+/**
+ * Quintic-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quintIn = (t) => t ** 5;
+/**
+ * Quintic-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quintOut = (t) => 1 - (1 - t) ** 5;
+/**
+ * Quintic-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quintInOut = (t) => (t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2);
+/**
+ * Exponential-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const expoIn = (t) => (t === 0 ? 0 : 2 ** (10 * t - 10));
+/**
+ * Exponential-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const expoOut = (t) => (t === 1 ? 1 : 1 - 2 ** (-10 * t));
+/**
+ * Exponential-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const expoInOut = (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2;
+/**
+ * Circular-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const circIn = (t) => 1 - Math.sqrt(1 - t ** 2);
+/**
+ * Circular-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const circOut = (t) => Math.sqrt(1 - (t - 1) ** 2);
+/**
+ * Circular-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const circInOut = (t) => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2;
+/**
+ * Back-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const backIn = (t) => 2.70158 * t ** 3 - 1.70158 * t ** 2;
+/**
+ * Back-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const backOut = (t) => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2;
+/**
+ * Back-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @param k - The back factor (optional, default is 1.70158 * 1.525).
+ * @returns The eased value.
+ */
+export const backInOut = (t, k = 1.70158 * 1.525) => t < 0.5
+    ? ((2 * t) ** 2 * ((k + 1) * 2 * t - k)) / 2
+    : ((2 * t - 2) ** 2 * ((k + 1) * (t * 2 - 2) + k) + 2) / 2;
+export const jsEasings = {
+    linear,
+    sineIn,
+    sineOut,
+    sineInOut,
+    quadIn,
+    quadOut,
+    quadInOut,
+    cubicIn,
+    cubicOut,
+    cubicInOut,
+    quartIn,
+    quartOut,
+    quartInOut,
+    quintIn,
+    quintOut,
+    quintInOut,
+    expoIn,
+    expoOut,
+    expoInOut,
+    circIn,
+    circOut,
+    circInOut,
+    backIn,
+    backOut,
+    backInOut,
+};
+/**
+ * CSS cubic-bezier easings based on PostCSS Easings
+ */
+export const cssEasings = {
+    linear: 'linear',
+    ease: 'ease',
+    easeIn: 'ease-in',
+    easeOut: 'ease-out',
+    easeInOut: 'ease-in-out',
+    sineIn: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+    sineOut: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+    sineInOut: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+    quadIn: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+    quadOut: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+    quadInOut: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+    cubicIn: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+    cubicOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    cubicInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+    quartIn: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
+    quartOut: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
+    quartInOut: 'cubic-bezier(0.77, 0, 0.175, 1)',
+    quintIn: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+    quintOut: 'cubic-bezier(0.23, 1, 0.32, 1)',
+    quintInOut: 'cubic-bezier(0.86, 0, 0.07, 1)',
+    expoIn: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
+    expoOut: 'cubic-bezier(0.19, 1, 0.22, 1)',
+    expoInOut: 'cubic-bezier(1, 0, 0, 1)',
+    circIn: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
+    circOut: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+    circInOut: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
+    backIn: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
+    backOut: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+    backInOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+};

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

@@ -1,3 +1,2 @@
 export * from './motion';
 export * from './types';
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,62 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom);
+    }
+    const easing = 'linear';
+    const { scale = 80 } = options.namedEffect;
+    return [
+        {
+            ...options,
+            easing,
+            part: 'BG_LAYER',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get startOffsetAdd() {
+                return `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100vh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    opacity: 1,
+                },
+                {
+                    opacity: 0,
+                },
+            ],
+        },
+        {
+            ...options,
+            easing,
+            part: 'BG_MEDIA',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100vh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    transform: 'perspective(100px) translateZ(0px)',
+                },
+                {
+                    transform: `perspective(100px) translateZ(${scale}px)`,
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,43 @@
+import { measureCompHeight } from './utils';
+const EASE_IN = 'sineIn';
+const EASE_OUT = 'sineOut';
+export default function create(options, dom) {
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom);
+    }
+    const { range = 'in' } = options.namedEffect;
+    const isOut = range === 'out';
+    const fromValue = isOut ? 1 : 0;
+    const toValue = isOut ? 0 : 1;
+    const easing = isOut ? EASE_OUT : EASE_IN;
+    return [
+        {
+            ...options,
+            part: 'BG_LAYER',
+            easing,
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            startOffsetAdd: isOut ? '100vh' : '0px',
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return isOut
+                    ? `calc(100vh + ${measures.compHeight}px)`
+                    : `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+            },
+            keyframes: [
+                {
+                    opacity: fromValue,
+                },
+                {
+                    opacity: toValue,
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,61 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom);
+    }
+    const easing = 'sineOut';
+    const { scale = 0.7 } = options.namedEffect;
+    return [
+        {
+            ...options,
+            easing: 'linear',
+            part: 'BG_LAYER',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            startOffsetAdd: '100vh',
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100vh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    opacity: 1,
+                },
+                {
+                    opacity: 0,
+                },
+            ],
+        },
+        {
+            ...options,
+            easing,
+            part: 'BG_LAYER',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            startOffsetAdd: '100vh',
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+            },
+            keyframes: [
+                {
+                    scale: 1,
+                },
+                {
+                    scale,
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,88 @@
+import { measureCompHeight, getScaleFromPerspectiveAndZ } from './utils';
+const PERSPECTIVE = 100;
+export default function create(options, dom) {
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom, true);
+    }
+    const { stretch = 1.3, zoom = 100 / 6 } = options.namedEffect;
+    const scale = getScaleFromPerspectiveAndZ(zoom, PERSPECTIVE);
+    return [
+        {
+            ...options,
+            part: 'BG_IMG',
+            easing: 'sineOut',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100svh + ${measures.compHeight}px)`;
+            },
+            get keyframes() {
+                return [
+                    {
+                        transform: 'translateY(10svh)',
+                    },
+                    {
+                        transform: `translateY(calc(${parseFloat((-0.1 * (2 - scale)).toFixed(2))} * var(--motion-comp-height, ${measures.compHeight}px)))`,
+                    },
+                ];
+            },
+        },
+        {
+            ...options,
+            part: 'BG_IMG',
+            easing: 'linear',
+            composite: 'add',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100svh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    transform: `scaleY(${stretch})`,
+                },
+                {
+                    transform: `scaleY(1)`,
+                },
+            ],
+        },
+        {
+            ...options,
+            part: 'BG_IMG',
+            easing: 'sineIn',
+            composite: 'add',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100svh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    transform: `perspective(${PERSPECTIVE}px) translateZ(0px)`,
+                },
+                {
+                    transform: `perspective(${PERSPECTIVE}px) translateZ(${parseFloat(zoom.toFixed(2))}px)`,
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,39 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom);
+    }
+    const { direction = 'left', speed = 0.2 } = options.namedEffect;
+    const offsetPercentage = ((50 * speed) / (1 + speed)) | 0;
+    let fromValue = `${offsetPercentage}%`;
+    let toValue = `-${offsetPercentage}%`;
+    if (direction === 'right') {
+        [fromValue, toValue] = [toValue, fromValue];
+    }
+    return [
+        {
+            ...options,
+            part: 'BG_MEDIA',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100vh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    transform: `translateX(${fromValue})`,
+                },
+                {
+                    transform: `translateX(${toValue})`,
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,33 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom, true);
+    }
+    const { speed = 0.2 } = options.namedEffect;
+    return [
+        {
+            ...options,
+            part: 'BG_MEDIA',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100svh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    transform: `translateY(${100 * speed}svh)`,
+                },
+                {
+                    transform: `translateY(calc((100% - 200lvh) * ${-speed}))`,
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,35 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom);
+    }
+    const easing = 'linear';
+    const { scale = 50 } = options.namedEffect;
+    return [
+        {
+            ...options,
+            easing,
+            part: 'BG_MEDIA',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `${measures.compHeight}px`;
+            },
+            keyframes: [
+                {
+                    transform: `perspective(100px) translate3d(0px, -${(scale / 3) | 0}%, ${scale}px)`,
+                },
+                {
+                    transform: 'perspective(100px) translate3d(0px, 0px, 0px)',
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,7 @@
+import { measureCompHeight } from './utils';
+export default function create(_options, dom) {
+    if (dom) {
+        measureCompHeight({ compHeight: 0 }, dom, true);
+    }
+    return [];
+}

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

@@ -0,0 +1,28 @@
+export default function create(options) {
+    const easing = 'sineOut';
+    const { angle = 22, direction = 'counter-clockwise' } = options.namedEffect;
+    return [
+        {
+            ...options,
+            easing,
+            part: 'BG_MEDIA',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffsetAdd: '100vh',
+            keyframes: [
+                {
+                    transform: `rotate(${direction === 'counter-clockwise' ? angle : -angle}deg)`,
+                },
+                {
+                    transform: 'rotate(0deg)',
+                },
+            ],
+        },
+    ];
+}

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

@@ -0,0 +1,33 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+    const measures = { compHeight: 0 };
+    if (dom) {
+        measureCompHeight(measures, dom);
+    }
+    const { angle = 20, direction = 'counter-clockwise' } = options.namedEffect;
+    return [
+        {
+            ...options,
+            part: 'BG_MEDIA',
+            startOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            endOffset: {
+                name: 'cover',
+                offset: { type: 'percentage', value: 0 },
+            },
+            get endOffsetAdd() {
+                return `calc(100vh + ${measures.compHeight}px)`;
+            },
+            keyframes: [
+                {
+                    transform: `skewY(${direction === 'counter-clockwise' ? angle : -angle}deg)`,
+                },
+                {
+                    transform: `skewY(${direction === 'counter-clockwise' ? -angle : angle}deg)`,
+                },
+            ],
+        },
+    ];
+}