Anime.js – A lightweight JavaScript animation library

One less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software.

I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd

This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...

I'm also doing the same thing for the Lunar frontpage: https://lunar.fyi/

But because Lunar's demo is a lot more resource intensive, I pre-rendered it into a video, and heavily optimized it for each screen size, in H.265, WEBM and H.264.

One of the biggest hurdles in Lunar's case was how to make the video have transparent regions. With Anime.js you are able to animate individual elements, placed around static text and buttons, which you can't do with videos.

Alpha support in videos is not so good, so I had to create a full-page video (in both portrait and landscape) with the right background color, and placed it as a background layer with a low z-index.

Finding the right video compression parameters to avoid background grain was not easy.

SebastianKra · 3 years ago

After a bit of reluctance to give up my right CMD-key, I decided to try rcmd and it has since disappeared into my workflow like no other app since window snapping.

Unlike similar solutions, unused keys are assigned dynamically based on the first letter of the app. So I can have my main apps on 1,2,3... and the rest will change based on which apps are open.

RyanHamilton · 3 years ago

rcmd looks cool. Good work. I use Windows + Number to go to the same apps, your idea of letters is a definitive improvement.

alin23 · 3 years ago

Thanks! That's where I got rcmd's inspiration from, I was previously a Windows power user and sorely missed the WinKey+number hotkey.

jtha · 3 years ago

I've been using a simple home-made Autohotkey script for years (decade?) to do it more like rmcd is doing.

Here's an example for opening Chrome or switching to it if it's open. If there is more than one Chrome window open it cycles between them by minimizing the current one, then opening the next one etc.

SetTitleMatchMode, 2

#c::

IfWinExist, Google Chrome

  IfWinActive

    WinMinimize

  else

    Winactivate

  else

    run,"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

return

aloer · 3 years ago

Does rcmd expose an api to e.g. call it via shell action in BTT? I would like to keep using BTT for higher level config.

In BTT I have currently set right cmd as a second hyper key (first one being caps). I could see rcmd being useful if I can define on a per key basis if it should run or not.

PS: Great blog you have

alin23 · 3 years ago

Hey thanks!

No, rcmd does not expose any API, but you can disable/enable only specific letters from the Settings: https://shots.panaitiu.com/zz8Y2kxL

You can also change the trigger key from ⌘ Right Command to any combination of direction-aware modifiers.

Also, if you don't make use of rcmd's dynamically assigned apps and you prefer to assign a letter to a specific app, you can use BTT only for this, no need for going through rcmd.

BTT has a focus-or-open action and it's what I used before building rcmd. It can't hide or cycle apps with the same letter like rcmd does but it's good enough for some people.

Mostly obsolete with CSS tweening.

You can do non-blocking animation timelines without any library if you use async javascript.

  <html>
  <body>
  <div>Click me to change color every second, then remove.
    <script>
      // Locality of Behavior
      me = document.currentScript.parentElement;
      me.addEventListener("click", async event => {
        me = event.target
        me.style.transition = "background 1s"
        await sleep(1000)
        me.style.background = "red"
        await sleep(1000)
        me.style.background = "green"
        await sleep(1000)
        me.style.background = "blue"
        await sleep(1000)
        me.style.background = "none"
        await sleep(1000)
        me.remove()
      })

      const sleep = ms => new Promise(r => setTimeout(r, ms));
    </script>
  </div>
  </body>
  </html>

If you like this, you may also want to check out: https://github.com/gnat/surreal

troupo · 3 years ago

The example is next to useless since it's so primitive. Anything more complex, and you end up developing your own library. Which you did, and linked.

So how is anime.js obsolete?

geenat · 3 years ago

The fundamental building block of the vanilla js snippet and anime.js is the ability to create non-blocking timelines + tweens- which we get for free now.

the optional "lib" is just aliases to make vanilla js less verbose.

hombre_fatal · 3 years ago

Libs like Anime.js are declarative and programmatic. They might be implemented with something that looks like your snippet, but that doesn't mean your snippet supersedes a declarative, programmatic API. Just like el.innerHTML = '<h1>hi</h1>' doesn't supersede React.js.

geenat · 3 years ago

Wanted to note, htmx's companion project at https://hyperscript.org/ does this naturally out of the box as well due to its async transparency.

pjc50 · 3 years ago

This looks interesting, and I _love_ how it takes influence from Hypercard. Even though I'm slightly too young to have really used that system.

mouzogu · 3 years ago

> Mostly obsolete

i'm so f#####g done with web dev.

geenat · 3 years ago

haha I mean, it's just built into browsers now. Nothing stopping someone from still using anime.js

imbnwa · 3 years ago

Isn't the WebAnimations API available in modern browsers?

DigitalSea · 3 years ago

Yes. But, that doesn't mean implementing these things is any easier. Maybe if you're sliding an element in and out, the WebAnimations API would suffice. If you're wanting to do advanced animation, you will end up creating your own library. With anime.js, you have better control over your animations. You can pause, play, reverse, and seek animations, as well as control their speed. It provides a powerful timeline feature which allows you to chain animations and control their sequence, something that is not available in the Web Animations API. You can also do things like line drawing and morphing, as well as animate CSS properties, SVG, DOM attributes and JavaScript Objects.

You can do most things natively, if you have the time and luxury of reinventing the wheel.

geenat · 3 years ago

Sure but in many situations a vanilla async function gives you the same result without the extra layer.

Bellend · 3 years ago

Are you really comparing this to Anime.js? I don't know if it's satire.

o1y32 · 3 years ago

Bad practice, requestAnimationFrame is preferred for such purposes:

https://developer.mozilla.org/en-US/docs/Web/API/window/requ...

https://stackoverflow.com/questions/38709923/why-is-requesta...

...and based on that I'm afraid you shouldn't be giving out advice on doing animations

pyentropy · 3 years ago

He's not using the timer to do per-frame calculations - the GPU does the interpolation using the `transition` property. He's just using the timer for setting the target state.

IggleSniggle · 3 years ago

There’s a difference between creating your own draw-loop with setTimeout and requesting a CSS animation.

Whether you use requestAnimationFrame which calls your code at every draw step or whether you set a CSS animation directive, you are delegating the animation work to the browser. In either case, the resultant behavior is dependent on browser-code, not your own js. This is very different than setting up your own manual draw loop with setTimeout.

JulianGarnier · 3 years ago

Hi, I'm the creator of Anime.js. Firstly, thank you for the submission. I honestly didn't anticipate being featured on the homepage of HN without any major update to the library! To those wondering why the project hasn't been updated recently, it's simply because I've been working on a new version (V4) for the last two years. The core library has been completely rewritten, I'm currently in the testing and documentation phase and should be ready for release by this summer.

Some of the new features of V4 include:

* Improved performance: The library has been entirely rewritten with performance optimization and low memory usage in mind.

* New ESM Module first API: Import only what you need and benefit from improved tree shaking.

* Better timelines: New options for animation positioning, allowing looping animations in timelines and improved parameters inheritance.

* Additive animations: A new tween composition mode that lets you smoothly blend concurrently running animations.

* Variable framerate: Specify different framerates for each animation or set it globally.

* New callbacks: onTick, onLoop, onRender, etc.

* Value modifiers: A function to modify or alter the behavior of the numerical values of the animated property value before rendering.

* Animate from: Animation from a given value to the current target value.

* Improved documentation: A new design with enhanced animations demos and more in-depth explanations.

* Unit tests

And much more! I can't wait to share it with you!

nextaccountic · 3 years ago

So another comment says that CSS Tweening makes your lib obsolete, which I don't think is true, but,

Can Anime.js make use of CSS Tweening on browsers that support it? Maybe as an optimization, rather than using requestAnimationFrame, on some kinds of animations

Not planned for now, but I haven't really looked into it. I'll consider after the V4 is released.

mathewpregasen · 3 years ago

I am actually writing a piece right now on the best animation frameworks for React (Framer Motion, react-spring etc.)

Was including Amine when I found this very recent HN post. I'm curious, in your perspective, what are the benefits of using Amine over something like Framer Motion? And would you recommend using the react-amine npm package or doing a custom binding—couldn't tell if that package was official.

animedev · 3 years ago

I would like to be among the testers, please. I prefer Anime over Gsap for all my projects.

jeanlucas · 3 years ago

Nice, Julian!

Is there any way to alpha/beta test for v4?

I've been considering offering early access exclusively to GitHub sponsors once the documentation and migration guide are completed.

Would this be something that interests you?

mkoryak · 3 years ago

Why do your docs use `var` for variable declarations?

Because the docs have been written 4 years ago, and back then const and let weren’t widely used.

The upcoming documentation for V4 has been completely rewritten with up to date JavaScript.

marban · 3 years ago

Timon3 · 3 years ago

Does one of these tools support an animation timeline with arbitrary seeking? Essentially I want to be able to have a progress slider representing the current time, and if the user clicks on any time on the slider, all animations should spring to that state, like a YouTube video. I played around with GSAP, anime and some others, but none properly supported playing the animations "backwards" (while jumping back).

I wrote my own implementation of a declarative animation engine (i.e. the same timeline position always looks the same), but I'm pretty sure there are still a couple of bugs allowing you to go out of sync.

Epskampie · 3 years ago

I'd think GSAP timeline is exactly made for that, but you say you've already tried that?

https://greensock.com/docs/v3/GSAP/Timeline

https://greensock.com/docs/v3/GSAP/Timeline/seek()

https://greensock.com/docs/v3/GSAP/Timeline/reverse()

nickcoury · 3 years ago

The native Web Animations API supports this with setting currentTime relative to the total duration.

hutzlibu · 3 years ago

Has anyone done any benchmarks comparing the different solutions?

I hit a performance bug with greensock once and just quickly wrote my own simple animation framework, which I am using ever since, but I suppose it can be done better. I would think the native browser animation capability is superior?

danmaz74 · 3 years ago

I was looking for an animation library some time ago, and theatrejs looks incredible. Anybody has any experience with it? In the end I used blender for what I needed, but I got very curious about it.

FireInsight · 3 years ago

I used motion.dev on a couple of test projects when I heard of it. And it's nice, the docs can be a bit lacking, though, and the userbase is tiny enough to have little to no discussion online.

swyx · 3 years ago

any good comparison table between them?

cloked · 3 years ago

Rive is great and simple, its kinda a better version of Lottie. here is some resources to learn more:

https://rive.app/use-cases https://rive.app/blog/rive-as-a-lottie-alternative

rtcode_io · 3 years ago

GreenSuck is not free.

gkoberger · 3 years ago

A good portion of it is, and the rest is absolutely worth the money.

mock-possum · 3 years ago

Why the sour puss? Greensock animations used to be everybody’s goto back in the days of AS3 and jQuery.

Imagine that: people wanting money for a complex project providing value.

impoppy · 3 years ago

>anime.js >look inside >no anime

https://i.kym-cdn.com/photos/images/original/002/515/832/ee7...

rapiz · 3 years ago

For simple use cases, I found animate.css[1] very handy.

[1] https://animate.style/

gabrielizaias · 3 years ago

A blast from the past! I've used animate.css around 2014–15, nice to see it still kicking.

Torn · 3 years ago

Looks like a project with 45k stars, where the latest update was Oct 2020. Why the HN post without a submission comment? Slick site I guess?

jdiff · 3 years ago

Slick front page with one of the best documentation pages I've come across. A sprawling v4 rewrite is in the works and Julian seems to have been picking up steam on it lately.

pietroppeter · 3 years ago

indeed https://twitter.com/JulianGarnier/status/1668295672750125058...

tambourine_man · 3 years ago

To raise awareness about a cool project? I didn’t know and was glad to learn about it.

93po · 3 years ago

Currently 500+ points and 120+ comments.

bboygravity · 3 years ago

Cool. We're finally back at the creativity level of Macromedia Flash websites a few decades ago.

mattgperry · 3 years ago

I mean the library is like a decade old so "finally back" is a stretch

wongarsu · 3 years ago

Now we just need someone to write an a visual IDE that makes this as approachable to non-programmers as Macromedia Flash was.

Dead Comment