Arjun Vijay Prakash

Posted on Mar 29

11 BEST JavaScript Animation Libraries 🎨✨

#webdev #javascript #design #news

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 transition effect.

Imagine when you scroll on a website, cool animations pop up to show you where to look next, like arrows pointing the way or texts fading in.

It's like a fun adventure guiding you through the website!

They help things move smoothly, catch attention, and guide users.

JavaScript libraries like GSAP make adding these animations easy for developers, making websites more enjoyable.

0️⃣ GreenSock Animation Platform (GSAP)

A robust JavaScript library for crafting high-performance animations.
➩ https://greensock.com/gsap/

1️⃣ Anime.js

A lightweight JavaScript animation library with a simple, yet powerful API.
➩ https://animejs.com

2️⃣ Velocity.js

An animation engine with the same API as jQuery’s $.animate(), offering colour animation, transforms, loops, easings, SVG support, and scrolling.
➩ http://velocityjs.org

3️⃣ Lottie

A JSON-based file format for high-quality animations, designed for cross-platform use, and easy implementation.
➩ https://airbnb.design/lottie/

4️⃣ ScrollMagic

A JavaScript library for creating scroll interactions, offering easy customizability and extendability.
➩ http://scrollmagic.io

5️⃣ Three.js

A JavaScript library for creating and displaying animated 3D graphics in web browsers using WebGL.
➩ https://threejs.org

6️⃣ Popmotion

A functional JavaScript motion library allows developers to animate in any JavaScript environment.
➩ https://popmotion.io

7️⃣ Mo.js

A JavaScript motion graphics library offering a different syntax and code animation structure approach.
➩ https://mojs.github.io

8️⃣ Typed.js

A JavaScript library that types out sentences at a set speed, backspaces what's typed, and begins a new sentence.
➩ https://mattboldt.com/demos/typed-js/

9️⃣ AniJS

A library that helps you raise your web design without coding, providing an easier way to manage animations
➩ http://anijs.github.io

🔟 Framer Motion

➩ https://framer.com/api/motion/

🙌 Final Thoughts

Animation libraries like GSAP and Three.js make websites and games super cool.

They let developers make amazing things out of the box.

GSAP helps write animations, while Three.js creates stunning 3D graphics.

Example - I made a website following a tutorial from the JavaScript Mastery YouTube Channel.

It's like Apple's iPhone 15 Pro website clone but simpler.

I used GSAP to make cool animations, like texts fading in smoothly and Three.js to put a 3D model of the iPhone on the site, making it look super cool and realistic!

Check it out here: https://iphone-page-arjuncodess.vercel.app/
Tutorial link: https://www.youtube.com/watch?v=kRQbRAJ4-Fs/

Comment your thoughts about this new trend in the web dev space!

Okay, that's it for today!

Connect with me @ Linktree.

Happy Coding! 🚀
Thanks for 25920! 🤗

Top comments (18)

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()
    }
}