23 ms·
Anime.js – A lightweight JavaScript animation library
- parentheses 3y agoThat demo animation is so mesmerizing. Great work!
- asaddhamani 3y agoI know right, the landing page is amazingly well done!
- brigadier132 3y agoVery cool, are there any comparisons with other animation libraries like gsap (which is proprietary)?
- KRAKRISMOTT 3y agoFramer Motion is a good modern alternative https://github.com/framer/motion https://github.com/framer/motion
- brigadier132 3y agoIm not really interested in react only solutions
- _HMCB_ 3y agoAmen.
- dan1234 3y agoMotion One is the non-react version of Framer Motion. https://motion.dev/ https://motion.dev/
- sieabahlpark 3y ago[dead]
- Torn 3y agoLooks like a project with 45k stars, where the latest update was Oct 2020. Why the HN post without a submission comment? Slick site I guess?
- tambourine_man 3y agoTo raise awareness about a cool project? I didn’t know and was glad to learn about it.
- jdiff 3y agoSlick front page with one of the best documentation pages I've come across. A sprawling v4 rewrite is in the works and Julian seems to have been picking up steam on it lately.
- pietroppeter 3y agoindeed https://twitter.com/JulianGarnier/status/1668295672750125058?s=20 https://twitter.com/JulianGarnier/status/1668295672750125058...
- 93po 3y agoCurrently 500+ points and 120+ comments.
- dylan604 3y agoAnime is such a specific use, and this is disappointing for anyone with that use in mind. Naming things is hard I guess????
- rubatuga 3y agoNot sure what the problem is when it enables discussions on the origin of the word anime (animation).
- labster 3y agoAnime (アニメ) is literally short for animation (アニメーション, animeishon).
- dylan604 3y agoliteral meaning and widely accepted use meaning do not always align. if I said Anime, would you think Tiny Toons, Family Guy, Toy Story, or Lion King? Or would you think DBZ, Akira, One Piece, etc?
- fenomas 3y agoTo be fair the library name may be based on Japanese usage, where the term just means anything animated (including all the works you mentioned).
- 411111111111111 3y agoIt's like the discussions about manga/manhua/manwha we keep return to, when they're all literally the same word with the same pronunciation and same meaning. It's really interesting how much lore we've created in our forums that doesn't actually exist in the country of origin.
- MiguelX413 3y agoLoanwords from all languages experience semantic shift very often.
- rapiz 3y agoFor simple use cases, I found animate.css[1] very handy. [1] https://animate.style/ https://animate.style/
- gabrielizaias 3y agoA blast from the past! I've used animate.css around 2014–15, nice to see it still kicking.
- leeoniya 3y agoprobably better: https://github.com/nextapps-de/fat https://github.com/nextapps-de/fat https://github.com/jeremyckahn/shifty https://github.com/jeremyckahn/shifty
- mmanfrin 3y agoWhat a great landing page.
- JulianGarnier 3y agoThank you!
- ChrisArchitect 3y ago(2017) anything new here lately?
- noduerme 3y agoThe round: parameter demo appears broken.
- shaneofalltrad 3y agoAnyone recommend a good animation library to create 3D builds for watches as an example as I need it to be very detailed? I am about to start investigating and this is looking really interesting for the purpose.
- beezlewax 3y agoThreejs
- h4ch1 3y agohttps://dev-sandbox.pixotronics.com/webgi/0.7.43/demos/core~viewer.html?m=pixo://gltf/classic-watch.glb?A6 https://dev-sandbox.pixotronics.com/webgi/0.7.43/demos/core~... something like this? Disclaimer: I work on this :)
- ToJans 3y agoCheck out threekit's Rolex configurator: https://www.threekit.com/3d-product-library/rolex-watch https://www.threekit.com/3d-product-library/rolex-watch
- mejutoco 3y agobabylonjs - https://www.babylonjs.com/ https://www.babylonjs.com/
- Lacerda69 3y agoThanks for making this! I used it before and it is very good. Can recommend it for everyone who needs slick js animations.
- satvikpendem 3y agoAnime is nice, however you should likely use Framer Motion these days if using React or Motion One if not (both are by the same creator but for different use cases).
- detaro 3y ago> you should likely use Framer Motion these days if using React or Motion One if not why are they better choices?
- graftak 3y agoFramer motion is quite bad with drag events in responsive layouts that have drag boundaries. It requires workarounds that are quite finicky. In my experience it has some performance issues too in edge cases where Gsap just chugs along. motion.one can only be used to animate node elements, not arbitrary data, so you’ll likely hit a wall eventually and then you’ll need to include another animation library on top. They’re both great libraries but they’re certainly not the one stop shop that Gsap (with expensive plugins) has proven to be (coming from someone that hates their docs and api’s).
- satvikpendem 3y agoWell, GSAP is quite a large library, along with its plugins. It is likely that most users who need basic animations do not need the heft that GSAP provides.
- FireInsight 3y agoMotion One can actually output arbitrary values https://motion.dev/dom/animate https://motion.dev/dom/animate
- geenat 3y agoMostly obsolete with CSS tweening. You can do non-blocking animation timelines without any library if you use async javascript. <html> <body> <div>Click me to change color every second, then remove. <script> // Locality of Behavior me = document.currentScript.parentElement; me.addEventListener("click", async event => { me = event.target me.style.transition = "background 1s" await sleep(1000) me.style.background = "red" await sleep(1000) me.style.background = "green" await sleep(1000) me.style.background = "blue" await sleep(1000) me.style.background = "none" await sleep(1000) me.remove() }) const sleep = ms => new Promise(r => setTimeout(r, ms)); </script> </div> </body> </html> If you like this, you may also want to check out: https://github.com/gnat/surreal https://github.com/gnat/surreal
- imbnwa 3y agoIsn't the WebAnimations API available in modern browsers?
- geenat 3y agoSure but in many situations a vanilla async function gives you the same result without the extra layer.
- the8472 3y agoThe animation API is likely more efficient/smoother if it lets the browser offload the animation to separate threads without blocking the event loop or having to rerun layout. Any script-triggered CSS change is "unexpected" from a layout engine perspective. Registering your animation in advance makes it an expected change.
- o1y32 3y agoThere is no "extra layer" -- it is a browser API supported by every browser by bow, which means that it should be treated the same say as settimeout
- 3y ago
- marban 3y agoRelated: https://www.theatrejs.com https://www.theatrejs.com https://rive.app https://rive.app https://greensock.com https://greensock.com https://motion.dev https://motion.dev
- rtcode_io 3y agoGreenSuck is not free.
- mock-possum 3y agoWhy the sour puss? Greensock animations used to be everybody’s goto back in the days of AS3 and jQuery.
- gkoberger 3y agoA good portion of it is, and the rest is absolutely worth the money.
- troupo 3y agoImagine that: people wanting money for a complex project providing value.
- swyx 3y agoany good comparison table between them?
- cloked 3y agoRive is great and simple, its kinda a better version of Lottie. here is some resources to learn more: https://rive.app/use-cases https://rive.app/use-cases https://rive.app/blog/rive-as-a-lottie-alternative https://rive.app/blog/rive-as-a-lottie-alternative
- scns 3y agoState Machine Driven Design, immediately intruiged.
- emilsedgh 3y agoAnime.js is pretty fantastic. Lovely API. Well done Julian.
- JulianGarnier 3y agoThanks, you're going to love V4.
- jabradoodle 3y agoAwesome looking website, though the documentation hijacking my back button was awful.
- FireInsight 3y agoIt's actually just a different hash selector for each item in the documentation, which your browser then navigates between by default.
- TheRealSenex 3y agoarrived expecting quick hentai generation. departed disappointed.
- bboygravity 3y agoCool. We're finally back at the creativity level of Macromedia Flash websites a few decades ago.
- suction 3y ago[dead]
- mattgperry 3y agoI mean the library is like a decade old so "finally back" is a stretch
- wongarsu 3y agoNow we just need someone to write an a visual IDE that makes this as approachable to non-programmers as Macromedia Flash was.
- sktrdie 3y agoNow that css is getting a linear() function we can get all kinds of spring/bounce/elastic animations that we couldn't before (hence why we resorted to JS). https://twitter.com/JoshWComeau/status/1660684634340962305 https://twitter.com/JoshWComeau/status/1660684634340962305 Once this lands stable in all browser we can say goodbye to JS library animations (rightly so since they block the main thread).
- FireInsight 3y agoWeb Animations API isn't blocking IIRC. https://motion.dev/ https://motion.dev/ uses it.
- sktrdie 3y agoRight but for spring animations you still have to run the calculations on the main thread. [1] 1. https://webcache.googleusercontent.com/search?q=cache:Pa8-Oa5mIXYJ:https://dev.to/virtualkirill/how-to-create-a-spring-animation-with-web-animation-api-n1i&cd=14&hl=en&ct=clnk&gl=nl https://webcache.googleusercontent.com/search?q=cache:Pa8-Oa...
- SirHound 3y agoYeah but these can be precalculated in the perceptual window as per Framer Motion and Motion One, and then handed off to WAAPI. Which is still needed for actual spring physicals vs the facsimile of linear() (which might often be enough!)
- alin23 3y agoOne less known use case for this is creating animated UI demos, which as a dev I find harder to do using video editing software. I used it to create the simple demo on the rcmd frontpage: https://lowtechguys.com/rcmd https://lowtechguys.com/rcmd This is the code, where I'm just animating elements of an SVG I previously created with Sketch: https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd/index.plim#L211-L379 https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd... I'm also doing the same thing for the Lunar frontpage: https://lunar.fyi/ https://lunar.fyi/ But because Lunar's demo is a lot more resource intensive, I pre-rendered it into a video, and heavily optimized it for each screen size, in H.265, WEBM and H.264. One of the biggest hurdles in Lunar's case was how to make the video have transparent regions. With Anime.js you are able to animate individual elements, placed around static text and buttons, which you can't do with videos. Alpha support in videos is not so good, so I had to create a full-page video (in both portrait and landscape) with the right background color, and placed it as a background layer with a low z-index. Finding the right video compression parameters to avoid background grain was not easy.
- RyanHamilton 3y agorcmd looks cool. Good work. I use Windows + Number to go to the same apps, your idea of letters is a definitive improvement.
- alin23 3y agoThanks! That's where I got rcmd's inspiration from, I was previously a Windows power user and sorely missed the WinKey+number hotkey.
- criley2 3y agoAs a windows power user using OSX for work, does your tool allow you to cycle through open windows by repeating the button? While I do love cmd+` for window switching in OSX, I still prefer Win+#### (repeated taps of the same number like Win+1,1,1) to cycle through my chrome windows in a known order. (So Win+1,1 always opens my second chrome window). Also for anyone else in this situation, is there a way to click on an app in the OSX dock and have it not surface every single window all at once? 2 years of OSX and I still struggle when all 6 chrome windows are surfaced and drown out my perfectly arranged other work.
- robofanatic 3y agoAwesome
- impoppy 3y ago>anime.js >look inside >no anime https://i.kym-cdn.com/photos/images/original/002/515/832/ee7.jpg https://i.kym-cdn.com/photos/images/original/002/515/832/ee7...
- toldyouso2022 3y agoI loved these libraries when I used to freelance, clients were so happy to see things move and they are so easy to implement
- valenterry 3y agoI deduct points for 1.) not showing a noscript message when JS is disabled and 2.) using the name "anime" which is commonly used for, well, Japanese anime.
- JulianGarnier 3y agoHi, 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!
- jeanlucas 3y agoNice, Julian! Is there any way to alpha/beta test for v4?
- JulianGarnier 3y agoI'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?
- jeanlucas 3y agoYes!
- 3y ago
- naveensky 3y agoamazing landing page, the animations are really slick !!
- timetraveller26 3y agoNo waifu in the front page, very disappointed.
- Dwedit 3y agoMy concern is that the CPU usage is very high when you are not actively interacting with the site. So if you leave the tab open, then go do something else, you will be wasting a lot of CPU resources. The only real way around that would be to put in a 5FPS cap after a minute of idle time (no mouse movements or scrolling), and additional culling for things that have scrolled out of view.
- jdiff 3y agoEvery browser I've come across suspends `requestAnimationFrame` callbacks when the page is not the focused tab. You won't be wasting resources, the animations will all suspend when you're not looking at them.
- deleted 3y ago[deleted]