Anime.js is 10 years old! 🎂🎉 A short thread about the current state of the lib, an update on the course, a few personal things, and a glimpse of what's next (hint in the video). 1/22 👇🧵
Julian Garnier
@julian.gr
Making → @animejs.com Support the project → https://github.com/sponsors/juliangarnier
Introducing Auto Layout in Anime.js v4.3! - Animate display flex / grid / none, etc. - Enter / Leave animations - Animate DOM position changes - Interruptible animations - Staggered children animations - Supports any easing functions - Dead simple API Links below ⬇︎
It wasn't deep. It didn't have much to say. But Xiao Xiao inspired millions to try Flash animation for themselves. A Beijing artist made this series -- and turned stick fights into a phenomenon. We're exploring why and how he did it: animationobsessive.substack.com/p/when-stick...
I tried to make sure all of the different templates are rendered correctly once imported to @codepen.io , but haven't manually checked all of the 450+ demos, so let me know if you notice an issue with one particular example! 🙏
Anime.js@animejs.com · 10mo agoAnime.js 4.2.1 is out with a bunch of small fixes and new features: 🐍 Motion Path: Add an offset parameter 👇 Draggable: Add a drag threshold parameter for mouse and touch ✏️ Documentation: You can now export and edit the 450 example demos on @codepen.io in one click!
For all of the spring curve enthusiasts out there
Anime.js@animejs.com · 10mo agoAnime.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 (animejs.com/easing-editor/)! Plus tons of fixes and improvements!
Anime.js@animejs.com · 12mo agoAnime.js 4.1.3 was just released with lots of small bug fixes. I'm particularly happy with the improved tween composition accuracy. Handling multiple overlapping animations on the same target is much more complex than you'd expect. Release notes: github.com/juliangarnie...
🖖
Anime.js@animejs.com · last yr.Introducing text.split(), Anime.js's take on text splitting: - Split words in any language (🇨🇳, 🇯🇵...) - Responsive line splitting - Clone and wrap elements - Custom HTML template - Easy animation management - Debug mode And much more! Check out the new docs animejs.com/documentatio...
Anime.js website is nominated for website of the month on awwwards! Your vote can greatly help the project to gain recognition, thanks for your support! www.awwwards.com/awards-of-th...
Awwwards Nominees
The eight highest-scoring sites each month are nominated for “Site of the Month” and reviewed by the jury a second time
awwwards.com
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. Join the waitlist here: animejs.com/learn/ Thank you! ❤️🙏
I cannot be happier with the feedback on v4. Thank you so much to everyone who commented and shared! Happy to see the Bluesky account taking off too!
Anime.js@animejs.com · last yr.After 5 years in the making, I'm very happy to finally release Anime.js v4, my dream animation library: 🧩 New modular API ⚡️ Highly performant 🖱️ Scroll-linked animations 🫵 Draggables ↔️ Responsive ✨ Additive animations 🪽 WAAPI support And so much more! Check out the new website animejs.com!
I mean, how good can a docs page really be? Surely people are exagera..... 😮
I can't believe it's out, I hope you like it as much as I do, I put a lot of care and effort into that thing. Massive thanks to all my sponsors, small and big, I couldn't have done it without them ❤️
Anime.js@animejs.com · last yr.After 5 years in the making, I'm very happy to finally release Anime.js v4, my dream animation library: 🧩 New modular API ⚡️ Highly performant 🖱️ Scroll-linked animations 🫵 Draggables ↔️ Responsive ✨ Additive animations 🪽 WAAPI support And so much more! Check out the new website animejs.com!
After 5 years in the making, I'm very happy to finally release Anime.js v4, my dream animation library: 🧩 New modular API ⚡️ Highly performant 🖱️ Scroll-linked animations 🫵 Draggables ↔️ Responsive ✨ Additive animations 🪽 WAAPI support And so much more! Check out the new website animejs.com!
Can't wait to show you what I've been working on in the past few months
Anime.js@animejs.com · last yr.Anime.js v4 will be released next week, and there's never been a better time to become a sponsor. Major releases drive huge traffic spikes, so if you want to promote your product or company during v4 launch and new landing page unveiling, check out my GitHub sponsor page! github.com/sponsors/jul...
Anime.js Beta 106 is out and completes the `animate()` and `waapi.animate()` APIs! Really happy with the amount of features packed in only 10KB and 3KB respectively! Available in early access to all my monthly GitHub sponsors! github.com/sponsors/jul... ❤️ Next up: v4.
@bram.us how safe is it to use `animation.effect.target`? The specs mention it as a potential future feature but after some tests it looks like it's already supported across Safari / FF / Chrome. And if not recommended, is there a better way to access the target registered on an animation? Thanks!
🪱
Anime.js@animejs.com · 2y agoAnime.js v4 beta 105 is out with improvements to the new WAAPI-powered `animate()` method! This spring animation runs entirely with the native WAAPI and can be written with just a few lines of code. Available in early access to all my monthly GitHub sponsors github.com/sponsors/jul...!
Introducing `waapi.animate()` in beta 104: Web Animations capabilities with the simplicity of Anime.js v4 API! - Multi-target animations - Advanced staggering - Accepts any easing function - Spring animations - Scroll-linked animations - Responsive animations - And more! github.com/sponsors/jul...
🎉 Exciting times for web animation – @motion.dev now open source w/ @citizenofnowhe.re – @juliangarnier.bsky.social all in on Anime.js V4 – @greensock.bsky.social GSAP integration into Webflow – Rive App responsive UI w/Layouts – Native CSS scroll-driven animations, view transitions, allow-discrete…
Decided to finally update my website for the first time in 8 years!