Promises and Promise-Like

new Animate() is promise-like meaning it has then, catch, and finally methods, but Animate itself isn’t a Promise (this is important to keep in mind when dealing with async/await asynchronous animations). Animate’s then resolves once all animations are complete. The promise resolves to an Array with the Animate instance being the only element, but the options animation option can use the options of another Animate instance allowing animation chaining to be straightforward and convenient. The Getting started section gives a basic example.

Since Animate relies on native promises, you can benefit from all the usual features promises provide, such as Promise.all, Promise.race, and especially async/await which makes animation timelines easy to set up.

An interesting quirk of Promises is that even though Animate is not a Promise, async/await still work with it because it has a then, and catch.

Warning: then, catch, and finally are not resetable, however, the Animate.prototype.on("finish", ...) event is, meaning if you reset an animation while then using then, catch, and finally, they will not fire again after the reset.

For example,

animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    target: ".div",
    duration: 3000,
    transform: ["translateY(-100vh)", "translateY(0vh)"],
});

// This will only run once
/*
    Note that the AnimateInstance is in an Array when it is resolved,
    this is due to Promises not wanting to resolve references,
    so, you can't resolve the `this` keyword directly.
    I chose to resolve `this` in an Array as it seemed like the best alternative
*/
.then(( [AnimateInstance] ) => ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    console.log(`${getProgress()}`%);
    AnimateInstance.reset();
});

// or
(async () => ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    const [AnimateInstance] = await animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
        target: ".div",
        duration: 3000,
        transform: ["translateY(-100vh)", "translateY(0vh)"],
    });

    await animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
        options: AnimateInstance,
        transform: ["rotate(0turn)", "rotate(1turn)"],
    });

    await animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
        options: AnimateInstance,
        duration: 800,
        easing: "in-quint",
        transform: ["scale(1)", "scale(0)"],
    });
})();