Anime.js 4.2.0 is out! 🧩 All modules can now be imported individually with subpaths 🎨 CSS variable values support 🏹 Simpler spring API with bounce & duration params 📈 More WAAPI built-in easing functions 🎛️ And an easing editor! Plus tons of fixes and improvements!

I'm particularly happy with the new spring system, big thanks to @k_grajeda for digging up the SwiftUI equations for converting bounce and perceptual duration 🙏, that helped a lot

The spring editor allows you to switch from perceived to physics parameters seamlessly.

Check out the easing editor here: And full release notes here:

So cool, gotta give props where it’s due 👍

Do you have a recommended workflow to utilise anime.js with coding models?

@nummanthinks This is a good start

Amazing thank you do much!

Its so crazy... 😮

@DotCSV maybe useful for your videos

Ok… that's cool…

Could I ask if you could also add a basic X/Y plot graph exporter as well? This would do absolute wonders for game development.

The CSS linear easing kind of does this already I think, the y is the value, and x is the number of points divided by the total of points. What would be the syntax?

Crazy lib, need to use this at some point.

the editor is a work of art. Could you add a tab here labeled "raw" or something and allow to copy paste the formula of the easing in case someone wants to apply it in another engine?

Thanks! What do you mean by "raw" exactly? For example, what would be the expected raw output of the outInElastic here? Technically you already import all the Anime.js easing functions without having to import the entire lib

something like "const expLerp = (a, b, t) => a * (b / a) ** t;" but since we can change the parameters vía dragging the handlers, it would be cool to have that in the formula as whatever numbers they are. like (a+0.0564)*(b/...) etc... the cutomization in the equation.

I see, yeah not a bad idea but I don't think I can justify spending more time on this at the moment, especially when you can already `import { eases } from 'animejs/easings';` to only import the easing functions in your project

Yeah but what if the person is using another language like Kotlin, C++, Java, Go, etc... this editor is very cool to design a tween it can grow bigger than just to be used for 1 library. Anyway...

Porting all the easing functions types to any languages? It's a bit out of scope for me as you can imagine. Supporting other UI libraries maybe, but pre-configured "raw" code would generate huge amount of code (raw spring JS code for reference:

dare to dream, son, aim to the moon, even if you fail, you'll land among the stars 😎

Awesome. 🎉🎉🎉🎉

this is sick

A beautiful AND useful interface!

the road to learning how to use node and incorporate this into my workflow hasn't been easy. thanks for making it easier. thanks for this meal @JulianGarnier

Really nice! I have a question: Can the final curve be exported to a Bezier so it can be used in any app?

I only support cubic bezier at the moment, so it's not possible to convert other easing curves to bezier. The CSS linear() version is the closest you can get at the moment

Beauty!

420 is my favorite number

Is the course still happening?

Yes!

really useful tool

Cool 🫨

This editor is soooo time-saving !!

This is peak web design

Damn this is really cool! One of the greatest tweet I came across in a while. Nice job 👏

better than ae flow do something

I didn’t know the project but it is a reql gem! Kudos

🤝🙏

It's exciting to see such continuous improvements in animation tools! The modular imports and enhanced easing options will surely make creating smooth, dynamic animations even more accessible and customizable.

amazing work

Thank you for this masterpiece

Amazing 👏👏👏

Geeze I love that configurator - so much juice in that 😊

Looks like an LFO from any modern synth

This is exactly what modern web animation needs. Clean API and powerful features combined perfectly

What's up the biggest difference between anime and gsap?

Was thinking of build tools for it, you Did it already.

You can still make your own, if you have an idea go for it

Thank you for your reply I was not expecting it tho, and getting back to cooking something. Will reach out to you once done.