@daks.dev/svelte.sdk/dist/utils/Animate.js

DAKS.DEV Svelte SDK

export const ANIMATION_DURATION = 1000;
export const ANIMATION_DELAY = 60;
class Animate {
    // (window.requestAnimationFrame || ((callback) => setTimeout(callback, ANIMATION_DELAY)))(callback)
    static request = (callback) => window.requestAnimationFrame(callback);
    // ((window.cancelAnimationFrame || ((id) => clearTimeout(id)))(id), 0)
    static cancel = (id) => (window.cancelAnimationFrame(id), 0);
    node;
    translate = {};
    rotate = {};
    duration = ANIMATION_DURATION;
    callback = null;
    constructor(node, transform, duration, callback) {
        this.node = node;
        if (transform.translate)
            this.translate = transform.translate;
        if (transform.rotate)
            this.rotate = transform.rotate;
        if (duration)
            this.duration = duration;
        if (callback)
            this.callback = callback;
    }
    handle = 0;
    action = 0;
    start = 0;
    previous = 0;
    done = false;
    render(timestamp) {
        this.start ??= timestamp;
        this.handle = 0;
        const elapsed = timestamp - this.start;
        if (this.previous !== timestamp) {
            const count = Math.min(0.1 * elapsed, 700);
            this.node.style.transform = `translate3d(-${count}px, 0px, 0px)`; // `translateX(-${count}px)` (will-change: transform)
            if (count === 700)
                this.done = true;
        }
        if (elapsed < 7000) {
            this.previous = timestamp;
            if (!this.done) {
                this.handle = Animate.request(this.render);
                this.callback?.call(this.node);
            }
        }
    }
    cancel() {
        this.handle = Animate.cancel(this.handle);
    }
    translate3d() { }
    rotate3d() { }
}
export default Animate;