DEV Community

Cover image for 11 BEST JavaScript Animation Libraries 🎨✨

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...
Collapse
 
btakita profile image
Brian Takita • 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

Collapse
 
tresorama profile image
Jacopo Marrone @tresorama • 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 ...

Collapse
 
btakita profile image
Brian Takita • 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'
                    }))
                }))
        }
Enter fullscreen mode Exit fullscreen mode

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()
    }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Amazing!

Collapse
 
tresorama profile image
Jacopo Marrone @tresorama

Add motion.one also

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

This is awesome! Thanks for mentioning!

Collapse
 
krakoss profile image
krakoss

very useful information Thank you very much for this article

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Glad you liked it!

Collapse
 
mezieb profile image
Okoro chimezie bright

Thank you

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

My pleasure!

Collapse
 
devella profile image
Daniella Elsie E.

This is useful thanks, I also wrote a post on websites one can build using Next.js, you can check it here

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Welcome!

Collapse
 
capscode profile image
capscode

Do checkout web-dev-resource.capscode.in/
Here we have listed 1000+ web tools which is very much beneficial for developers.

And do share your feedback.

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

This is great! Thanks for mentioning this.

Collapse
 
hosseinyazdi profile image
Hossein Yazdi

Great one Arjun as always! For those who're interested in more, here's some more useful javascript animations: webcurate.co/c/javascript-animation

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Thanks brother!

Collapse
 
rohiitbagal profile image
Rohit

this was super exited...

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Nice!