DEV Community

11 BEST JavaScript Animation Libraries 🎨✨

Arjun Vijay Prakash on March 29, 2024

Animations make websites and apps fun and easy to use. They make apps feel alive, like when a button changes colour when clicked with some transiti...

Read full post

Brian Takita • Mar 30 • Edited

The Web Animations API is great. Particularly with a good reactive library.

Shameless plug: rmemo + the Web Animation API allowed me to replace motion.one. With simpler event timelines. And a smaller bundle payload size (< 600B overhead).

These pages include animations with a YouTube player for < 4.5kb transferred.

brookebrodack.net/brookers
brookebrodack.net/content

Jacopo Marrone @tresorama • Mar 30 • Edited

How do you handle timeline with WAAPI (Web Animation API) ?

I tried to replace other lib with that, and for single aniamation the API is pretty much like anime.js, but when i wanted to do timeline I've not found a clear explanation ...

Brian Takita • Mar 31 • Edited

Thank you for the question. I forgot to mention. I'm managing the state of the animations in the reactive memos. I extracted a primitive called a wanimato...a contraction of "web animation object". Wanimato is exported in ctx-core/web_animation. The types & js implementation are exported along with ctx-core/rmemo.

The min + brotli size of wanimato__new & memo_ is 733 B according to the size-limit library.

An animation timeline is achieved using conditionals in the reactive memo. An animation can wait for a previous animation to finish with an if (!previous_animation$().is_finish) return guard. I will show two examples:

In the Brookers Timeline, the wanimatos are instantiated as variables.

github.com/btakita/ui--browser--br...

        function h1__flyin_wanimato$_() {
            return calling(memo_<wanimato_T>(
                $=>{
                    h1.classList.remove('opacity-0')
                    return wanimato__new($, h1, ()=>h1.animate([
                        { transform: `translate(calc(-25vw + ${h1__center__factor}), -25vh) rotate(-45deg)`, opacity: 0 },
                        { transform: `translate(calc(4px + ${h1__center__factor}), 1px) rotate(10deg)`, opacity: 1 },
                        { transform: `translate(calc(40px + ${h1__center__factor}), 10px) rotate(10deg)`, opacity: 1 },
                    ], { duration: 400, fill: 'both', easing: 'ease-in' }))
                }))
        }
        function h1__bounce_wanimato$_() {
            return calling(memo_<wanimato_T|undefined>(
                $=>{
                    if (!h1__flyin_wanimato$().is_finish) return
                    const keyframe_a1 = s180_d12_spring__keyframe_a1_({
                        X: 40, Y: 10, O: 10, X_factor: h1__center__factor
                    })
                    return wanimato__new($, h1, ()=>h1.animate(keyframe_a1, {
                        duration: 800,
                        easing: 'ease-in',
                        fill: 'both'
                    }))
                }))
        }

h1__flyin_wanimato$ is the first step of the animation sequence. h1__bounce_wanimato$_() waits until h1__flyin_wanimato$ is complete before starting. Since this system is reactive, the animations are controlled by the reactive state. Parallel animation tracks can occur.

In the Brooke Brodack Content Page, I use a ctx to aid in orchestrating the animation state...along with the YouTube Player state.

Here is an interesting section that shows uses be_ functions, which take a ctx to orchestrate animations in concert with the YT_Player.

github.com/btakita/ui--browser--br...

Here are the first two wanimatos from the block of code.

const [
    ,
    video__div__is_open_,
    video__div__is_open__set
] = be_sig_triple_(()=>false)
async function video__div__open(ctx:wide_ctx_T) {
    video__div__is_open__set(ctx, true)
    const video__div__wanimato = video__div__wanimato_(ctx)
    await video__div__wanimato?.animation.ready
    if (video__div__wanimato && !video__div__wanimato?.finish_currentTime) {
        video__div__wanimato_(ctx)?.animation.play()
        YT_iframe__wanimato_(ctx)?.animation.play()
        site__header__wanimato_(ctx)?.animation.play()
        site_header__img__wanimato_(ctx)?.animation.play()
    }
}
async function video__div__close(ctx:wide_ctx_T) {
    video__a__set(ctx, null)
    YT_player_(ctx)?.stopVideo()
    video__div__is_open__set(ctx, false)
    await video__div__wanimato_(ctx)?.animation.ready
    if (video__div__wanimato_(ctx)?.finish_currentTime) {
        video__div__wanimato_(ctx)?.animation.reverse()
        YT_iframe__wanimato_(ctx)?.animation.reverse()
        site__header__wanimato_(ctx)?.animation.reverse()
        site_header__img__wanimato_(ctx)?.animation.reverse()
    }
}