@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -0,0 +1,112 @@
+const MAX_Y_TRAVEL = 40;
+const POWER_MAP = {
+    soft: { scaleFrom: 0.8, scaleTo: 1.2, travelY: 0 },
+    medium: { scaleFrom: 0.3, scaleTo: 1.7, travelY: 0.75 },
+    hard: { scaleFrom: 0, scaleTo: 4, travelY: 1 },
+};
+const directionMap = {
+    top: [0, -50],
+    'top-right': [50, -50],
+    right: [50, 0],
+    'bottom-right': [50, 50],
+    bottom: [0, 50],
+    'bottom-left': [-50, 50],
+    left: [-50, 0],
+    'top-left': [-50, -50],
+    center: [0, 0],
+};
+const RANGES_MAP = {
+    in: (scaleFrom, _scaleTo, travelY) => ({
+        fromValues: { scale: scaleFrom, travel: travelY },
+        toValues: { scale: 1, travel: 0 },
+    }),
+    out: (_scaleFrom, scaleTo, travelY) => ({
+        fromValues: { scale: 1, travel: 0 },
+        toValues: { scale: scaleTo, travel: -travelY },
+    }),
+    continuous: (scaleFrom, scaleTo, travelY) => ({
+        fromValues: { scale: scaleFrom, travel: travelY },
+        toValues: { scale: scaleTo, 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 { power, range = 'in', scale = range === 'in' ? POWER_MAP.hard.scaleFrom : POWER_MAP.hard.scaleTo, direction = 'center', speed = 0, } = options.namedEffect;
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const { scaleFrom, scaleTo, travelY } = power && POWER_MAP[power]
+        ? POWER_MAP[power]
+        : {
+            scaleFrom: scale,
+            scaleTo: scale,
+            travelY: speed,
+        };
+    const { fromValues, toValues } = RANGES_MAP[range](scaleFrom, scaleTo, travelY * -MAX_Y_TRAVEL);
+    const { start, end } = getScrubOffsets(options.namedEffect);
+    const [trnsX, trnsY] = directionMap[direction];
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            startOffsetAdd: start,
+            endOffsetAdd: end,
+            keyframes: [
+                {
+                    transform: `translateY(${fromValues.travel}vh) translate(${trnsX}%, ${trnsY}%) scale(${fromValues.scale}) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`,
+                },
+                {
+                    transform: `translateY(${toValues.travel}vh) translate(${trnsX}%, ${trnsY}%) scale(${toValues.scale}) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`,
+                },
+            ],
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     translate: 0 <fromValues.travel>;
+     *   }
+     *   to {
+     *     translate: 0 <toValues.travel>;
+     *   }
+     * }
+     *
+     * @keyframes <name>-scale {
+     *   from {
+     *     scale: <fromValues.scale>;
+     *   }
+     *   <scaleDelay>% {
+     *     scale: <fromValues.scale>;
+     *     animation-timing-function: <scaleEase>;
+     *   }
+     *   <scaleDuration>% {
+     *     scale: <toValues.scale>;
+     *   }
+     *   to {
+     *     scale: <toValues.scale>;
+     *   }
+     * }
+     *
+     * @supports (animation-timeline: view()) {
+     *   #target {
+     *     animation: <name> auto <easing> both,
+     *                <name>-scale auto linear both;
+     *     animation-range: cover <start> cover <end>,
+     *                      cover <start> cover <end>;
+     *     animation-timeline: view(), view();
+     *   }
+     * }
+     * @supports not (animation-timeline: view()) {
+     *   #target {
+     *     animation: <name> 100ms linear <fill> paused,
+     *                <name>-scale 100ms linear <fill> paused;
+     *   }
+     * }
+     */
+}

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

@@ -0,0 +1,72 @@
+import { getCssUnits, transformPolarToXY } from '../../utils';
+const POWER_MAP = {
+    soft: { value: 150, type: 'px' },
+    medium: { value: 400, type: 'px' },
+    hard: { value: 800, type: 'px' },
+};
+const RANGES_MAP = {
+    in: (travelX, travelY) => ({
+        fromValue: { x: travelX, y: travelY },
+        toValue: { x: 0, y: 0 },
+    }),
+    out: (travelX, travelY) => ({
+        fromValue: { x: 0, y: 0 },
+        toValue: { x: travelX, y: travelY },
+    }),
+    continuous: (travelX, travelY) => ({
+        fromValue: { x: travelX, y: travelY },
+        toValue: { x: -travelX, y: -travelY },
+    }),
+};
+function getScrubOffsets({ angle = 210, distance = { value: 400, type: 'px' }, power, range = 'in', }) {
+    const travel = power ? POWER_MAP[power] : distance;
+    const [, travelY] = transformPolarToXY(angle - 90, travel.value);
+    const isTravelingDownwards = (travelY < 0 && range !== 'out') || (travelY > 0 && range === 'out');
+    const units = getCssUnits(travel.type);
+    const startOffsetAdd = isTravelingDownwards ? `${travelY}${units}` : '0px';
+    const endOffsetAdd = isTravelingDownwards ? `${Math.abs(travelY)}${units}` : '0px';
+    return {
+        start: range === 'out' ? '0px' : startOffsetAdd,
+        end: range === 'in' ? '0px' : endOffsetAdd,
+    };
+}
+export default function create(options, _, config) {
+    const { power, distance = { value: 400, type: 'px' }, angle = 210, range = 'in', } = options.namedEffect;
+    const travel = power ? POWER_MAP[power] : distance;
+    const [travelX, travelY] = transformPolarToXY(angle - 90, travel.value);
+    const { fromValue, toValue } = RANGES_MAP[range](Math.round(travelX), Math.round(travelY));
+    const unit = getCssUnits(travel.type);
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const { start, end } = config?.ignoreScrollMoveOffsets
+        ? { start: '', end: '' }
+        : getScrubOffsets(options.namedEffect);
+    // use transform: translate(<value>) and not translate: <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            startOffsetAdd: start,
+            endOffsetAdd: end,
+            keyframes: [
+                {
+                    transform: `translate(${fromValue.x}${unit}, ${fromValue.y}${unit}) rotate(var(--comp-rotate-z, 0))`,
+                },
+                {
+                    transform: `translate(${toValue.x}${unit}, ${toValue.y}${unit}) rotate(var(--comp-rotate-z, 0))`,
+                },
+            ],
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     transform: translate(<fromValue.x>, <fromValue.y>) rotate(var(--comp-rotate-z, 0));
+     *   }
+     *   to {
+     *     transform: translate(<toValue.x>, <toValue.y>) rotate(var(--comp-rotate-z, 0));
+     *   }
+     * }
+     */
+}

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

@@ -0,0 +1,67 @@
+import { getCssUnits } from '../../utils';
+const DIRECTIONS = {
+    left: 1,
+    right: -1,
+};
+const OFFSCREEN_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 { distance = { value: 400, type: 'px' }, direction = 'left', startFromOffScreen = true, range = 'in', } = options.namedEffect;
+    const travel = distance.value * DIRECTIONS[direction];
+    const { startX, endX } = startFromOffScreen
+        ? OFFSCREEN_POSITIONS[direction]
+        : {
+            startX: `${-travel}${getCssUnits(distance.type)}`,
+            endX: `${travel}${getCssUnits(distance.type)}`,
+        };
+    const fromValue = range === 'out' ? 0 : startX;
+    const toValue = range === 'in' ? 0 : range === 'out' ? startX : endX;
+    const easing = 'linear';
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    if (startFromOffScreen && dom) {
+        let left = 0;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            left = target.getBoundingClientRect().left;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-left', `${left}px`);
+        });
+    }
+    // use transform: translateX(<value>) and not translate: <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            keyframes: [
+                {
+                    transform: `translateX(${fromValue}) rotate(var(--comp-rotate-z, 0))`,
+                },
+                {
+                    transform: `translateX(${toValue}) rotate(var(--comp-rotate-z, 0))`,
+                },
+            ],
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     transform: translateX(<fromValue>) rotate(var(--comp-rotate-z, 0));
+     *   }
+     *   to {
+     *     transform: translateX(<toValue>) rotate(var(--comp-rotate-z, 0));
+     *   }
+     * }
+     */
+}

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

@@ -0,0 +1,48 @@
+const DEFAULT_SPEED = 0.5;
+function getOffsetAdd(factor, speed) {
+    return `${100 * factor * speed}vh`;
+}
+function getScrubOffsets({ speed = DEFAULT_SPEED }) {
+    const start = getOffsetAdd(-0.5, speed);
+    const end = getOffsetAdd(0.5, speed);
+    return {
+        start,
+        end,
+    };
+}
+export default function create(options) {
+    const { speed = DEFAULT_SPEED } = options.namedEffect;
+    const fromValue = `${-50 * speed}vh`;
+    const toValue = `${50 * speed}vh`;
+    const easing = 'linear';
+    const { start, end } = getScrubOffsets(options.namedEffect);
+    // use transform: translateY(<value>) and not translate: 0 <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281
+    return [
+        {
+            ...options,
+            fill: 'both',
+            easing,
+            startOffsetAdd: start,
+            endOffsetAdd: end,
+            keyframes: [
+                {
+                    transform: `translateY(${fromValue}) rotate(var(--comp-rotate-z, 0))`,
+                },
+                {
+                    transform: `translateY(${toValue}) rotate(var(--comp-rotate-z, 0))`,
+                },
+            ],
+        },
+    ];
+    // only 'continuous' and 0%-100% of range
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     transform: translateY(<fromValue>) rotate(var(--comp-rotate-z, 0));
+     *   }
+     *   to {
+     *     transform: translateY(<toValue>) rotate(var(--comp-rotate-z, 0));
+     *   }
+     * }
+     */
+}

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

@@ -0,0 +1,87 @@
+import { getClipPolygonParams, getAdjustedDirection } from '../../utils';
+const DIRECTIONS = ['bottom', 'left', 'top', 'right'];
+const OPPOSITE_DIRECTION_MAP = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+const initialClip = getClipPolygonParams({ direction: 'initial' });
+function getClipFrom(direction, range) {
+    return range === 'out'
+        ? initialClip
+        : getClipPolygonParams({
+            direction: OPPOSITE_DIRECTION_MAP[direction],
+        });
+}
+function getClipTo(direction, range) {
+    return range === 'in'
+        ? initialClip
+        : getClipPolygonParams({
+            direction: range === 'out' ? OPPOSITE_DIRECTION_MAP[direction] : direction,
+        });
+}
+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);
+    let clipFrom = getClipFrom(direction, range);
+    let clipTo = getClipTo(direction, range);
+    if (dom) {
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0';
+            dom.mutate(() => {
+                const adjDirection = getAdjustedDirection(DIRECTIONS, direction, parseInt(rotation, 10));
+                clipFrom = getClipFrom(adjDirection, range);
+                clipTo = getClipTo(adjDirection, range);
+                target.style.setProperty('--motion-clip-from', clipFrom);
+                target.style.setProperty('--motion-clip-to', clipTo);
+            });
+        });
+    }
+    const keyframes = range === 'continuous'
+        ? [
+            { clipPath: `var(--motion-clip-from, ${clipFrom})` },
+            { clipPath: initialClip },
+            { clipPath: `var(--motion-clip-to, ${clipTo})` },
+        ]
+        : [
+            { clipPath: `var(--motion-clip-from, ${clipFrom})` },
+            { clipPath: `var(--motion-clip-to, ${clipTo})` },
+        ];
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            keyframes,
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     clip-path: <fromValue>;
+     *   }
+     *   to {
+     *     clip-path: <toValue>;
+     *   }
+     * }
+     *
+     * OR for continuous:
+     *
+     * @keyframes <name> {
+     *   from {
+     *     clip-path: <fromValue>;
+     *   }
+     *   50% {
+     *     clip-path: <initialClip>;
+     *   }
+     *   to {
+     *     clip-path: <toValue>;
+     *   }
+     * }
+     */
+}

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

@@ -0,0 +1,124 @@
+import { getEasing } from '../../utils';
+const SHAPES = {
+    diamond: {
+        start: {
+            soft: 'polygon(50% 20%, 80% 50%, 50% 80%, 20% 50%)',
+            medium: 'polygon(50% 40%, 60% 50%, 50% 60%, 40% 50%)',
+            hard: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',
+        },
+        end: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)',
+    },
+    window: {
+        start: {
+            soft: 'inset(20% round 50% 50% 0% 0%)',
+            medium: 'inset(35% round 50% 50% 0% 0%)',
+            hard: 'inset(50% round 50% 50% 0% 0%)',
+        },
+        end: 'inset(-20% round 50% 50% 0% 0%)',
+    },
+    rectangle: {
+        start: {
+            soft: 'inset(20%)',
+            medium: 'inset(50%)',
+            hard: 'inset(80%)',
+        },
+        end: 'inset(0%)',
+    },
+    circle: {
+        start: {
+            soft: 'circle(40%)',
+            medium: 'circle(25%)',
+            hard: 'circle(0%)',
+        },
+        end: 'circle(75%)',
+    },
+    ellipse: {
+        start: {
+            soft: 'ellipse(50% 50%)',
+            medium: 'ellipse(30% 30%)',
+            hard: 'ellipse(0% 0%)',
+        },
+        end: 'ellipse(75% 75%)',
+    },
+};
+const RESPONSIVE_SHAPES_MAP = {
+    diamond: (clipFactor) => {
+        const clip = clipFactor / 2;
+        const clipNeg = 100 - clip;
+        return [
+            `polygon(50% ${clip}%, ${clipNeg}% 50%, 50% ${clipNeg}%, ${clip}% 50%)`,
+            'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)',
+        ];
+    },
+    window: (clipFactor) => [
+        `inset(${clipFactor / 2}% round 50% 50% 0% 0%)`,
+        'inset(-20% round 50% 50% 0% 0%)',
+    ],
+    rectangle: (clipFactor) => [`inset(${clipFactor}%)`, `inset(0%)`],
+    circle: (clipFactor) => [`circle(${100 - clipFactor}%)`, `circle(75%)`],
+    ellipse: (clipFactor) => {
+        const clip = 50 - clipFactor / 2;
+        return [`ellipse(${clip}% ${clip}%)`, `ellipse(75% 75%)`];
+    },
+};
+const easing = getEasing('circInOut');
+const KEYFRAMES_RANGE_MAP = {
+    in: (start, end) => [
+        {
+            clipPath: start,
+            easing,
+        },
+        {
+            clipPath: end,
+        },
+    ],
+    out: (start, end) => [
+        {
+            clipPath: end,
+            easing,
+        },
+        {
+            clipPath: start,
+        },
+    ],
+    continuous: (start, end) => [
+        {
+            clipPath: start,
+            easing,
+        },
+        {
+            clipPath: end,
+            easing,
+        },
+        {
+            clipPath: start,
+        },
+    ],
+};
+export default function create(options) {
+    const { shape = 'circle', power, intensity = 0.5, range = 'in', } = options.namedEffect;
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const [start, end] = power && SHAPES[shape].start[power]
+        ? [SHAPES[shape].start[power], SHAPES[shape].end]
+        : RESPONSIVE_SHAPES_MAP[shape](intensity * 100);
+    const keyframes = KEYFRAMES_RANGE_MAP[range](start, end);
+    return [
+        {
+            ...options,
+            fill,
+            easing: 'linear',
+            keyframes,
+        },
+    ];
+    /*
+     * @keyframes <name> {
+     *   from {
+     *     clip-path: <fromValue>;
+     *     easing: <easing>;
+     *   }
+     *   to {
+     *     clip-path: <toValue>;
+     *   }
+     * }
+     */
+}

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

@@ -0,0 +1,109 @@
+const MAX_Y_TRAVEL = 40;
+const POWER_MAP = {
+    soft: { scaleFrom: 1.2, scaleTo: 0.8, travelY: 0 },
+    medium: { scaleFrom: 1.7, scaleTo: 0.3, travelY: 0.5 },
+    hard: { scaleFrom: 3.5, scaleTo: 0, travelY: 1 },
+};
+const directionMap = {
+    top: [0, -50],
+    'top-right': [50, -50],
+    right: [50, 0],
+    'bottom-right': [50, 50],
+    bottom: [0, 50],
+    'bottom-left': [-50, 50],
+    left: [-50, 0],
+    'top-left': [-50, -50],
+    center: [0, 0],
+};
+const RANGES_MAP = {
+    in: (scaleFrom, _scaleTo, travelY) => ({
+        fromValues: { scale: scaleFrom, travel: travelY },
+        toValues: { scale: 1, travel: 0 },
+    }),
+    out: (_scaleFrom, scaleTo, travelY) => ({
+        fromValues: { scale: 1, travel: 0 },
+        toValues: { scale: scaleTo, travel: -travelY },
+    }),
+    continuous: (scaleFrom, scaleTo, travelY) => ({
+        fromValues: { scale: scaleFrom, travel: travelY },
+        toValues: { scale: scaleTo, 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 { power, range = 'in', scale = range === 'in' ? 1.2 : 0.8, direction = 'center', speed = 0, } = options.namedEffect;
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const { scaleFrom, scaleTo, travelY } = power && POWER_MAP[power]
+        ? POWER_MAP[power]
+        : {
+            scaleFrom: scale,
+            scaleTo: scale,
+            travelY: speed,
+        };
+    const { fromValues, toValues } = RANGES_MAP[range](scaleFrom, scaleTo, travelY * -MAX_Y_TRAVEL);
+    const easing = 'linear';
+    const { start: startOffsetAdd, end: endOffsetAdd } = getScrubOffsets(options.namedEffect);
+    const [trnsX, trnsY] = directionMap[direction];
+    return [
+        {
+            ...options,
+            fill,
+            easing,
+            startOffsetAdd,
+            endOffsetAdd,
+            keyframes: [
+                {
+                    transform: `translateY(${fromValues.travel}vh) translate(${trnsX}%, ${trnsY}%) scale(${fromValues.scale}) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`,
+                },
+                {
+                    transform: `translateY(${toValues.travel}vh) translate(${trnsX}%, ${trnsY}%) scale(${toValues.scale}) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`,
+                },
+            ],
+        },
+    ];
+    /* // we may want to squash both animations into a single one and simply generate dynamically all the necessary keyframes to reach same result
+     * @keyframes <name> {
+     *   from {
+     *     translate: 0 <fromValues.travel>;
+     *   }
+     *   to {
+     *     translate: 0 <toValues.travel>;
+     *   }
+     * }
+     *
+     * @keyframes <name>-scale {
+     *   from {
+     *     scale: <fromValues.scale>;
+     *     animation-timing-function: <scaleEase>;
+     *   }
+     *   <scaleDuration>% {
+     *     scale: <toValues.scale>;
+     *   }
+     *   to {
+     *     scale: <toValues.scale>;
+     *   }
+     * }
+     *
+     * @supports (animation-timeline: view()) {
+     *   #target {
+     *     animation: <name> auto <easing> both,
+     *                <name>-scale auto linear both;
+     *     animation-range: cover <start> cover <end>,
+     *                      cover <start> cover <end>;
+     *     animation-timeline: view(), view();
+     *   }
+     * }
+     * @supports not (animation-timeline: view()) {
+     *   #target {
+     *     animation: <name> 100ms linear <fill> paused,
+     *                <name>-scale 100ms linear <fill> paused;
+     *   }
+     * }
+     */
+}

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

@@ -0,0 +1,63 @@
+import { getShuttersClipPaths, getEasing } from '../../utils';
+const OPPOSITE_DIRECTION_MAP = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+export default function create(options) {
+    const { direction = 'right', shutters = 12, staggered = true, range = 'in', } = options.namedEffect;
+    const fill = (range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill);
+    const easing = range === 'in' ? getEasing('sineIn') : getEasing('sineOut');
+    const directionOpp = OPPOSITE_DIRECTION_MAP[direction];
+    const { clipStart, clipEnd } = getShuttersClipPaths(range === 'out' ? directionOpp : direction, shutters, staggered);
+    const start = range !== 'out' ? clipStart : clipEnd;
+    const end = range !== 'out' ? clipEnd : clipStart;
+    let keyframes;
+    if (range === 'continuous') {
+        const { clipStart: oppClipStart, clipEnd: oppClipEnd } = getShuttersClipPaths(directionOpp, shutters, staggered, true);
+        keyframes = [
+            {
+                clipPath: start,
+                easing,
+            },
+            {
+                clipPath: end,
+                offset: staggered ? 0.45 : 0.4,
+                easing,
+            },
+            {
+                clipPath: end,
+                offset: staggered ? 0.55 : 0.6,
+                easing,
+            },
+            {
+                clipPath: oppClipEnd,
+                offset: staggered ? 0.55 : 0.6,
+                easing,
+            },
+            {
+                clipPath: oppClipStart,
+            },
+        ];
+    }
+    else {
+        keyframes = [
+            {
+                clipPath: start,
+                easing,
+            },
+            {
+                clipPath: end,
+            },
+        ];
+    }
+    return [
+        {
+            ...options,
+            fill,
+            easing: 'linear',
+            keyframes,
+        },
+    ];
+}