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.
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.
What I would be particularly interested in: What is the creative process of turning an animation idea into code? Suppose I have an idea of what the animation should look like: What is the best way to approach the task of expressing the animation in code?
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!
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)
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.
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
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.
"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
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.
