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.
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.
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.
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.
"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
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/