JulianGarnier

It's decided, I'm making a course!

I'll explain how the new Anime.js website was created by recreating the entire landing page from scratch, while sharing all the animation tricks and techniques I've learned throughout the years.

You can join the waitlist here https://animejs.com/learn/

Sorry about that. I had lots of issues with this form... I added a dedicated page for joining the wait list for the course I'm making about recreating the landing page. You can join here: https://animejs.com/learn/ (this signup form should work, otherwise you can email me directly at the email address listed below it)

You can leave your email in the footer of the landing page > https://animejs.com/#site-footer I'll set up a dedicated temporary page for the course soon. Thanks for the interest!

Hey I'm the author of the lib, I think this is my favorite comment about the landing page I read so far. I've started learning web development with Flash in the 2000s, so this hits home. Thank you!

Hey I'm the author of the lib, exactly, I don't really "highjack" the body scroll, I'm only controlling the background animations with it, while keeping most of the body content scroll naturally with the page.

Hey I'm the author of the lib, I'm thinking about making a course on how to re-create the landing page, would that be something you're interested in?

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.

Creating something like the homepage of animejs.com without an animation library today is still quite challenging.

<3

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

Also, I love that every time I make it to the front page of HN, this comes up.

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?

Thank you!

Thanks, you're going to love V4.

It's also a reference to the verb "animated“ in french: "animé".

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!

No I didn't, and you're right, GSAP perf looks amazing under your stress test! But I think it's a little bit unfair to compare performance on one test case. Anime was designed to offer more control on a single animation (like specific timings and easings by properties / elements) to avoid running multiple RAF at the same time (which is exactly what your test does), and keep the compact as possible. Having 300 dom elements changing their top/left properties wasn't really my goal when I started working on Anime.

Simply use the path object created by anime.path() as a value of one of your transform property (doc updated https://github.com/juliangarnier/anime#motion-path)

"Anime (Japanese: アニメ), is Japanese hand-drawn or computer animation. The word is the abbreviated pronunciation of "animation" in Japanese, where this term references all animation." https://en.wikipedia.org/wiki/Anime

Ok so I went with "flexible", I'm not 100% sure yet, but that will do the job for now

Weird, it works really smoothly on my phone. Not sure what can be the cause of the CPU outrage on a laptop, specially on Chrome... I'll try to make some tests on Linux.

+1

Regarding the performance, Anime is equal or better in some cases than the other javascript animation libraries out there.

Not sure to understand what you mean by "coordinate multiple animations", Are you talking about some kind of timeline?

It means "multipurpose", polyvalent is a really common word in French, but apparently doesn't have the same signification in English, or is less common. I'll replace it by something else.

No, but you can record your screen using an app like Licecap (that's what I did for the documentation)

Haha thanks! Any suggestions for an alternative word?

Can works with CSS / SVG / Canvas animations

GSAP can do a lot more than Anime. But it’s also way more heavy. My goal with this library was to keep the API simple as possible, focus on the things I really need (multiple timings, easings, playback controls…) while keeping the code super lightweight (9KB minified).

This is a javascript animation library that I made and used on my latest projects. The source and documentation are on Github. Feedbacks are welcome!

Hard to say, it was a side project I did in my spare time. All I know is that I started working on it 4 months ago, and spend my whole summer vacations working on it.