@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/AnimationGroup.js

@@ -0,0 +1,91 @@
+/**
+ * @class AnimationGroup
+ *
+ * A wrapper object for simulating a GroupEffect and managing multiple animations.
+ * See: https://www.w3.org/TR/web-animations-2/#grouping-and-synchronization
+ */
+export class AnimationGroup {
+    animations;
+    options;
+    ready;
+    isCSS;
+    constructor(animations, options) {
+        this.animations = animations;
+        this.options = options;
+        this.ready = options?.measured || Promise.resolve();
+        this.isCSS = animations[0] instanceof CSSAnimation;
+    }
+    getProgress() {
+        return this.animations[0]?.effect?.getComputedTiming().progress || 0;
+    }
+    async play(callback) {
+        await this.ready;
+        for (const animation of this.animations) {
+            animation.play();
+        }
+        // TODO: Wait for all animations to be ready, using allSettled to handle rejections gracefully
+        // await Promise.allSettled(
+        await Promise.all(this.animations.map((animation) => animation.ready));
+        if (callback) {
+            callback();
+        }
+    }
+    pause() {
+        for (const animation of this.animations) {
+            animation.pause();
+        }
+    }
+    async reverse(callback) {
+        await this.ready;
+        for (const animation of this.animations) {
+            animation.reverse();
+        }
+        // TODO: Wait for all animations to be ready, using allSettled to handle rejections gracefully
+        // await Promise.allSettled(
+        await Promise.all(this.animations.map((animation) => animation.ready));
+        if (callback) {
+            callback();
+        }
+    }
+    progress(p) {
+        for (const animation of this.animations) {
+            const { delay, duration, iterations } = animation.effect.getTiming();
+            const time = (Number.isFinite(duration) ? duration : 0) *
+                (Number.isFinite(iterations) ? iterations : 1);
+            animation.currentTime = ((delay || 0) + time) * p;
+        }
+    }
+    cancel() {
+        for (const animation of this.animations) {
+            animation.cancel();
+        }
+    }
+    setPlaybackRate(rate) {
+        for (const animation of this.animations) {
+            animation.playbackRate = rate;
+        }
+    }
+    async onFinish(callback) {
+        try {
+            await Promise.all(this.animations.map((animation) => animation.finished));
+            const a = this.animations[0];
+            if (a && !this.isCSS) {
+                const target = a.effect?.target;
+                if (target) {
+                    const endEvent = new Event('animationend');
+                    target.dispatchEvent(endEvent);
+                }
+            }
+            callback();
+        }
+        catch (_error) {
+            console.warn('animation was interrupted - aborting onFinish callback - ', _error);
+        }
+    }
+    get finished() {
+        return Promise.all(this.animations.map((animation) => animation.finished));
+    }
+    get playState() {
+        return this.animations[0]?.playState;
+    }
+}

package/dist/es/CustomAnimation.js

@@ -0,0 +1,169 @@
+/**
+ * @class CustomAnimation
+ *
+ * A wrapper object for Animation that mimics the same interface but implements CustomEffect that runs JS code instead of KeyframeEffect.
+ * The class is implemented by holding an inner Animation object instead of inheritance due to some browsers not allowing extension of built-in objects.
+ */
+export class CustomAnimation {
+    _animation;
+    customEffect;
+    progress;
+    _tickCbId;
+    _finishHandler;
+    constructor(customEffect, target, effectOptions, timingOptions) {
+        // overriding composite so that animation is not replaced and removed
+        const effect = new KeyframeEffect(target, [], {
+            ...effectOptions,
+            composite: 'add',
+        });
+        const { timeline } = timingOptions;
+        this._animation = new Animation(effect, timeline);
+        this._tickCbId = null;
+        this.progress = null;
+        this.customEffect = (progress) => customEffect(effect.target, progress);
+        // stop loop if animation is removed from the DOM after finish (does not fire 'remove' event)
+        this._finishHandler = (_) => {
+            if (!this.effect.target?.getAnimations().find((a) => a === this._animation)) {
+                this.cancel();
+            }
+        };
+        this.addEventListener('finish', this._finishHandler);
+        this.addEventListener('remove', this._finishHandler);
+    }
+    // private tick method for customEffect loop implementation
+    _tick() {
+        try {
+            const progress = this.effect?.getComputedTiming().progress ?? null;
+            if (progress !== this.progress) {
+                this.customEffect?.(progress);
+                this.progress = progress;
+            }
+            this._tickCbId = requestAnimationFrame(() => {
+                this._tick();
+            });
+        }
+        catch (error) {
+            this._tickCbId = null;
+            console.error(`failed to run customEffect! effectId: ${this.id}, error: ${error instanceof Error ? error.message : error}`);
+        }
+    }
+    // Animation timing properties
+    get currentTime() {
+        return this._animation.currentTime;
+    }
+    set currentTime(time) {
+        this._animation.currentTime = time;
+    }
+    get startTime() {
+        return this._animation.startTime;
+    }
+    set startTime(time) {
+        this._animation.startTime = time;
+    }
+    get playbackRate() {
+        return this._animation.playbackRate;
+    }
+    set playbackRate(speed) {
+        this._animation.playbackRate = speed;
+    }
+    // Animation basic properties
+    get id() {
+        return this._animation.id;
+    }
+    set id(uid) {
+        this._animation.id = uid;
+    }
+    get effect() {
+        return this._animation.effect;
+    }
+    set effect(e) {
+        this._animation.effect = e;
+    }
+    get timeline() {
+        return this._animation.timeline;
+    }
+    set timeline(tl) {
+        this._animation.timeline = tl;
+    }
+    // Animation readonly state properties
+    get finished() {
+        return this._animation.finished;
+    }
+    get pending() {
+        return this._animation.pending;
+    }
+    get playState() {
+        return this._animation.playState;
+    }
+    get ready() {
+        return this._animation.ready;
+    }
+    get replaceState() {
+        return this._animation.replaceState;
+    }
+    // Animation event handlers
+    get oncancel() {
+        return this._animation.oncancel;
+    }
+    set oncancel(cb) {
+        this._animation.oncancel = cb;
+    }
+    get onfinish() {
+        return this._animation.onfinish;
+    }
+    set onfinish(cb) {
+        this._animation.onfinish = cb;
+    }
+    get onremove() {
+        return this._animation.onremove;
+    }
+    set onremove(cb) {
+        this._animation.onremove = cb;
+    }
+    // CustomAnimation overridden methods
+    play() {
+        this._animation.play();
+        cancelAnimationFrame(this._tickCbId);
+        this._tickCbId = requestAnimationFrame(() => this._tick());
+    }
+    pause() {
+        this._animation.pause();
+        cancelAnimationFrame(this._tickCbId);
+        this._tickCbId = null;
+    }
+    cancel() {
+        this.removeEventListener('finish', this._finishHandler);
+        this.removeEventListener('remove', this._finishHandler);
+        this._animation.cancel();
+        // signaling cancelation for customEffect to handle it as desired
+        this.customEffect(null);
+        cancelAnimationFrame(this._tickCbId);
+        this._tickCbId = null;
+    }
+    commitStyles() {
+        console.warn('CustomEffect animations do not support commitStyles method as they have no style to commit');
+    }
+    // Animation methods without override
+    finish() {
+        this._animation.finish();
+    }
+    persist() {
+        this._animation.persist();
+    }
+    reverse() {
+        this._animation.reverse();
+    }
+    updatePlaybackRate(playbackRate) {
+        this._animation.updatePlaybackRate(playbackRate);
+    }
+    // Animation events API
+    addEventListener(type, listener, options) {
+        this._animation.addEventListener(type, listener, options);
+    }
+    removeEventListener(type, listener, options) {
+        this._animation.removeEventListener(type, listener, options);
+    }
+    dispatchEvent(event) {
+        return this._animation.dispatchEvent(event);
+    }
+}

package/dist/es/api/common.js

@@ -0,0 +1,125 @@
+import { scrollAnimations } from '../library/scroll';
+import { entranceAnimations } from '../library/entrance';
+import { ongoingAnimations } from '../library/ongoing';
+import { mouseAnimations } from '../library/mouse';
+import { backgroundScrollAnimations } from '../library/backgroundScroll';
+import { getCssUnits, getEasing } from '../utils';
+import fastdom from 'fastdom';
+function getElement(id, ownerDocument) {
+    return id ? (ownerDocument || document).getElementById(id) : null;
+}
+function getElementMotionPart(element, part) {
+    if (element?.matches(`[data-motion-part~="${part}"]`)) {
+        return element;
+    }
+    return element?.querySelector(`[data-motion-part~="${part}"]`);
+}
+function getDirection(effect) {
+    const alternate = effect.alternate ? 'alternate' : '';
+    return effect.reversed
+        ? `${alternate ? `${alternate}-` : ''}reverse`
+        : alternate || 'normal';
+}
+function getLength(length) {
+    return `${length.value}${getCssUnits(length.type)}`;
+}
+function getRange(range, add, isEnd) {
+    // according to the CSS spec if the end range is a <length> then it is calculated from the start of the named range
+    // our model assumes that <length> in end range is calculated from the end of the named range
+    return `${range.name || 'cover'} ${isEnd && range.offset.type !== 'percentage'
+        ? `calc(100% + ${getLength(range.offset)}${add ? ` + ${add}` : ''})`
+        : add
+            ? `calc(${getLength(range.offset)} + ${add})`
+            : getLength(range.offset)}`;
+}
+function getRanges(effect) {
+    return {
+        start: getRange(effect.startOffset, effect.startOffsetAdd),
+        end: getRange(effect.endOffset, effect.endOffsetAdd, true),
+    };
+}
+function measure(target) {
+    return (fn) => fastdom.measure(() => fn(target));
+}
+function mutate(target) {
+    return (fn) => fastdom.mutate(() => fn(target));
+}
+function getNamedEffect(animation) {
+    if (animation.namedEffect) {
+        const name = animation.namedEffect.type;
+        // check each preset library for the named effect
+        if (name in scrollAnimations) {
+            return scrollAnimations[name];
+        }
+        else if (name in entranceAnimations) {
+            return entranceAnimations[name];
+        }
+        else if (name in ongoingAnimations) {
+            return ongoingAnimations[name];
+        }
+        else if (name in mouseAnimations) {
+            return mouseAnimations[name];
+        }
+        else if (name in backgroundScrollAnimations) {
+            return backgroundScrollAnimations[name];
+        }
+    }
+    else if (animation.keyframeEffect) {
+        const effect = (animation_) => {
+            const { name, keyframes } = animation_.keyframeEffect;
+            return [{ ...animation_, name, keyframes }];
+        };
+        const getNames = (animation_) => {
+            const { effectId } = animation_;
+            const { name } = animation_.keyframeEffect;
+            const uid = name || effectId;
+            return uid ? [uid] : [];
+        };
+        return { web: effect, style: effect, getNames };
+    }
+    else if (animation.customEffect) {
+        return (animation_) => [{ ...animation_, keyframes: [] }];
+    }
+    return null;
+}
+function getEffectsData(animations, trigger, effectId) {
+    // process each AnimationData object into a KeyframeEffect object
+    return animations.map((effect, index) => {
+        // prepare the KeyframeEffectOptions object
+        const effectOptions = {
+            fill: effect.fill,
+            easing: getEasing(effect.easing),
+            iterations: effect.iterations === 0 ? Infinity : effect.iterations || 1,
+            composite: effect.composite,
+            direction: getDirection(effect),
+        };
+        // if this is a time-based animation then set the duration and delay as time values
+        if (isNotAScrubTrigger(trigger)) {
+            effectOptions.duration = effect.duration;
+            effectOptions.delay = effect.delay || 0;
+        }
+        else {
+            // if ViewTimeline is supported
+            if (window.ViewTimeline) {
+                // set duration to 'auto'
+                effectOptions.duration = 'auto';
+            }
+            else {
+                // if ViewTimeline not supported then put a 100ms value in duration get a progress we can easily relate to
+                // we split the duration to 99.99ms and delay of 0.01ms to get the fill-mode effect working
+                effectOptions.duration = 99.99;
+                effectOptions.delay = 0.01;
+            }
+        }
+        return {
+            effect,
+            options: effectOptions,
+            id: effectId && `${effectId}-${index + 1}`,
+            part: effect.part,
+        };
+    });
+}
+function isNotAScrubTrigger(trigger) {
+    return !trigger || (trigger.trigger !== 'pointer-move' && trigger.trigger !== 'view-progress');
+}
+export { isNotAScrubTrigger, getElement, getElementMotionPart, getNamedEffect, getEffectsData, measure, mutate, getDirection, getLength, getRanges, };

package/dist/es/api/cssAnimations.js

@@ -0,0 +1,44 @@
+import { getEffectsData, getRanges, getNamedEffect, isNotAScrubTrigger } from './common';
+function getAnimationTarget(target, part) {
+    return target ? `#${target}${part ? `[data-motion-part~="${part}"]` : ''}` : '';
+}
+function getAnimationAsCSS(data, isRunning) {
+    const { duration, delay, iterations = 1, fill, easing = 'linear', direction } = data.options;
+    const animationName = data.effect.name;
+    const isAutoDuration = duration === 'auto';
+    return `${animationName} ${isAutoDuration ? 'auto' : `${duration}ms`}${isAutoDuration ? ' ' : ` ${delay || 1}ms `}${easing}${fill && fill !== 'none' ? ` ${fill}` : ''} ${!iterations || iterations === Infinity ? 'infinite' : iterations}${direction === 'normal' ? '' : ` ${direction}`} ${isRunning ? '' : 'paused'}`;
+}
+function getCSSAnimationEffect(preset, animation, trigger) {
+    if (preset?.style) {
+        // validate duration is a number over 0
+        if (isNotAScrubTrigger(trigger)) {
+            animation.duration = animation.duration || 1;
+        }
+        return preset.style(animation);
+    }
+    return [];
+}
+function getCSSAnimation(target, animationOptions, trigger) {
+    // get the preset for the given animation options
+    const namedEffect = getNamedEffect(animationOptions);
+    const animationsData = getCSSAnimationEffect(namedEffect, animationOptions);
+    const data = getEffectsData(animationsData, trigger, animationOptions.effectId);
+    const isViewProgress = trigger?.trigger === 'view-progress';
+    return data.map((item, index) => {
+        const { start, end } = isViewProgress
+            ? getRanges(item.effect)
+            : {};
+        return {
+            target: getAnimationTarget(target, item.part),
+            animation: getAnimationAsCSS(item, isViewProgress),
+            composition: item.options.composite,
+            custom: item.effect.custom,
+            name: item.effect.name,
+            keyframes: item.effect.keyframes,
+            id: item.id && `${item.id}-${index + 1}`,
+            animationTimeline: isViewProgress ? `--${trigger?.id}` : '',
+            animationRange: start || end ? `${start} ${end}` : '',
+        };
+    });
+}
+export { getCSSAnimation, getCSSAnimationEffect, getAnimationAsCSS };

package/dist/es/api/prepare.js

@@ -0,0 +1,12 @@
+import { getElement, getNamedEffect, measure, mutate } from './common';
+import fastdom from 'fastdom';
+function prepareAnimation(target, animation, callback) {
+    const preset = getNamedEffect(animation);
+    const element = target instanceof HTMLElement ? target : getElement(target);
+    if (preset && preset.prepare && element) {
+        const domApi = { measure: measure(element), mutate: mutate(element) };
+        preset.prepare(animation, domApi);
+    }
+    callback && fastdom.mutate(callback);
+}
+export { prepareAnimation };

package/dist/es/api/webAnimations.js

@@ -0,0 +1,128 @@
+import { CustomAnimation } from '../CustomAnimation';
+import { AnimationGroup } from '../AnimationGroup';
+import { getElement, getElementMotionPart, measure, mutate, getRanges, getNamedEffect, getEffectsData, isNotAScrubTrigger, } from './common';
+import fastdom from 'fastdom';
+function getWebAnimationEffect(preset, animation, target, trigger, options) {
+    if (preset) {
+        // validate duration is a number over 0
+        if (isNotAScrubTrigger(trigger)) {
+            animation.duration = animation.duration || 1;
+            if (options?.reducedMotion) {
+                if (animation.iterations === 1 || animation.iterations == undefined) {
+                    animation = { ...animation, duration: 1 };
+                }
+                else {
+                    return [];
+                }
+            }
+        }
+        let domApi;
+        if (target instanceof HTMLElement) {
+            domApi = { measure: measure(target), mutate: mutate(target) };
+        }
+        return preset.web
+            ? preset.web(animation, domApi, options)
+            : preset(animation, domApi, options);
+    }
+    return [];
+}
+function getWebAnimation(target, animationOptions, trigger, options, ownerDocument) {
+    const element = target instanceof HTMLElement ? target : getElement(target, ownerDocument);
+    if (trigger?.trigger === 'pointer-move') {
+        let effectOptions = animationOptions;
+        if (animationOptions.customEffect) {
+            effectOptions = {
+                ...animationOptions,
+                namedEffect: { id: '', type: 'CustomMouse' },
+            };
+        }
+        // TODO: need to fix the type here, currently lying about the returned type to be WebAnimationEffectFactory instead of MouseAnimationFactoryCreate
+        const mouseAnimationPreset = getNamedEffect(effectOptions);
+        const mouseAnimationFactory = getWebAnimationEffect(mouseAnimationPreset, animationOptions, element, trigger, options);
+        // Return null if mouseAnimationFactory is not callable
+        if (typeof mouseAnimationFactory !== 'function') {
+            return null;
+        }
+        return mouseAnimationFactory(element);
+    }
+    // get the preset for the given animation options
+    const namedEffect = getNamedEffect(animationOptions);
+    const animationsData = getWebAnimationEffect(namedEffect, animationOptions, element, trigger, options);
+    // Return null if animation data cannot be generated
+    if (!animationsData || animationsData.length === 0) {
+        return null;
+    }
+    const data = getEffectsData(animationsData, trigger, animationOptions.effectId);
+    let timeline;
+    const isViewProgress = trigger?.trigger === 'view-progress';
+    // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API
+    if (isViewProgress && window.ViewTimeline) {
+        // generate the timeline object
+        // @ts-expect-error
+        timeline = new ViewTimeline({
+            subject: trigger.element || getElement(trigger.componentId),
+        });
+    }
+    // generate an Animation object for each data object
+    const animations = data.map(({ effect, options: effectOptions, id, part }) => {
+        const effectTarget = part ? getElementMotionPart(element, part) : element;
+        const keyframeEffect = new KeyframeEffect(effectTarget || null, [], effectOptions);
+        // set the keyframes for the KeyframeEffect after measurements and mutations
+        fastdom.mutate(() => {
+            if ('timing' in effect) {
+                keyframeEffect.updateTiming(effect.timing);
+            }
+            keyframeEffect.setKeyframes(effect.keyframes);
+        });
+        const timingOptions = isViewProgress && timeline ? { timeline: timeline } : {};
+        const animation = typeof effect.customEffect === 'function'
+            ? new CustomAnimation(effect.customEffect, effectTarget || null, effectOptions, timingOptions)
+            : new Animation(keyframeEffect, timingOptions.timeline);
+        // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API
+        if (isViewProgress) {
+            if (timeline) {
+                // set the ranges for the animation after measurements and mutations
+                fastdom.mutate(() => {
+                    const { start, end } = getRanges(effect);
+                    // @ts-expect-error
+                    animation.rangeStart = start;
+                    // @ts-expect-error
+                    animation.rangeEnd = end;
+                    animation.play();
+                });
+            }
+            else {
+                const { startOffset, endOffset } = animationOptions;
+                // set the ranges for the animation after measurements and mutations
+                fastdom.mutate(() => {
+                    const startOffsetToWrite = effect.startOffset || startOffset;
+                    const endOffsetToWrite = effect.endOffset || endOffset;
+                    Object.assign(animation, {
+                        start: {
+                            name: startOffsetToWrite.name,
+                            offset: startOffsetToWrite.offset?.value,
+                            add: effect.startOffsetAdd,
+                        },
+                        end: {
+                            name: endOffsetToWrite.name,
+                            offset: endOffsetToWrite.offset?.value,
+                            add: effect.endOffsetAdd,
+                        },
+                    });
+                });
+            }
+        }
+        if (id) {
+            animation.id = id;
+        }
+        return animation;
+    });
+    // create an AnimationGroup with the generate animations
+    return new AnimationGroup(animations, {
+        ...animationOptions,
+        trigger: { ...(trigger || {}) },
+        // make sure the group is ready after all animation targets are measured and mutated
+        measured: new Promise((resolve) => fastdom.mutate(resolve)),
+    });
+}
+export { getWebAnimation };