9 ms·
Show HN: Anime.js – Polyvalent JavaScript Animation Engine
- JulianGarnier 10y agoThis is a javascript animation library that I made and used on my latest projects. The source and documentation are on Github. Feedbacks are welcome!
- mdolon 10y agoThis is great! Outside of the obvious use case for flourishes and light animations, are there other uses you're envisioning this for? All of your other work is fantastic too, tres magnifique!
- leetrout 10y agoDo you have any quick notes on how this compares and contrasts with GSAP[1] other than the licensing? Is there any clear case for "Use Anime.js for XYZ"? [1] http://greensock.com/gsap http://greensock.com/gsap
- JulianGarnier 10y agoGSAP 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).
- Akkuma 10y agoHave you seen or used https://github.com/Popmotion/popmotion/ https://github.com/Popmotion/popmotion/? These both seem fairly similar, both small libraries with a lot of overlap.
- tlrobinson 10y agoWhat does "polyvalent" mean in this context?
- spoiler 10y agoJust guessing, but I think it means it can animate things asynchronously and independently, even though "polyvalent" might not be the best word to describe those features.
- JulianGarnier 10y agoCan works with CSS / SVG / Canvas animations
- cr3ative 10y agoI had to look up the word, and the dictionary definition didn't suggest this meaning to me. The library is much more interesting when you realise what you're looking for this word to convey, though!
- JulianGarnier 10y agoHaha thanks! Any suggestions for an alternative word?
- ghurtado 10y ago"Polyglot" might work better. I realize that these are not different languages that the library can use, but you could reasonably interpret it to mean that the library "speaks" SVG / Canvas / Javascript objects.
- lucideer 10y agoIt's a tough one, because technically I think polyvalent may actually be the most correct word by definition (albeit from a different domain), but this thread would indicate that understandability and not technical correctness is more important. Polyglot, as has been suggested elsewhere, probably fits best even if it's very slightly inaccurate (normally pertaining specifically to multi-language use)
- code_research 10y agoThis looks great, thank you for open sourcing this! I would like to ask two things: How do you think about the velocity.js code regarding performance optimization? What would be the best way to coordinate multiple (potentially dependent) animations? I am thinking about a kind of dispatcher or switchboard logic - it would be great to see an advanced example right from the author. Thank you very much for your attention!
- JulianGarnier 10y agoRegarding 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?
- zachrose 10y agoI you are talking about some kind of timeline, may I plug my own JavaScript solution for this? It's called Barrel: https://github.com/zachrose/barrel https://github.com/zachrose/barrel You can think of it either as map for setTimeout, or a way to turn sequences into a player object that accepts your own function to perform each point in the sequence.
- code_research 10y agothanks, this looks like a good start. I would like to add "watchers" and "signals" that could trigger sequences. But I do not want to reinvent things, sure there must be something already out there (I am just an occasional user of js animations for gui elements, so I have no clue about the js animation universe).
- zachrose 10y agoHmm, cool! The way I might go about that using Barrel would be to have many sequences in many players, can hook up your signals to call play() (or pause/rewind/stop, as needed) on the right player. Also, Barrel has no built-in story for animations or anything HTML specific. But you can include tweening information in the events that make up the sequence, as long as your "doer" function knows how to perform them.
- dgreensp 10y agoThe only documentation of the anime.path function is the example: anime.path('path') I think I can guess how to use it -- the argument is a "target" that resolves to an SVG path element (in the example, the only SVG path element on the page), and some processing is performed on the path element to get some sort of path object -- but it might help to clarify.
- JulianGarnier 10y agoSimply 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 https://github.com/juliangarnier/anime#motion-path)
- surkin 10y agoImpressive.
- Secretmapper 10y agoTotally awesome work! It would be great to get some comparison tables (size, compatibility, speed) for the common animation libraries (velocity, tweenmax/lite, etc) Also digging your personal site!
- deleted 10y ago[deleted]
- trollboll 10y agoVery nice but it explodes my work laptops CPU (running ubuntu 16.04 + chrome 50) even just idling on http://anime-js.com/ http://anime-js.com/ Im guessing you need to add some "sleep" somewhere
- guessmyname 10y agoJesus! I had to force-kill my browser after a tab (didn't know which one at first) started eating all my 6GB of RAM, then realized it was this one when I restored the session. I almost reboot my computer entirely if it wasn't because I was doing something important in the Terminal. One would assume that posting a link in this website would be after some testing of the link in itself. I guess I will need to be extra careful when clicking shared links, specially if they have JS in the URL. Linux 3.16 (amd64) Google Chrome 52.0.2743.41 beta Four other tabs open, five with this "anime-js.com"
- ghostly_s 10y agoNo need to be dramatic. The site nor the Codepens have any unduly high impact on my work machine, an underpowered Windows 7 machine with Chrome Version 51.0.2704.103 m (64-bit). Just because you encountered a bug in your setup doesn't necessarily imply the author has exhibited reckless abandon in testing this project.
- TeMPOraL 10y agoMaybe the low resource usage on your work machines is actually a bug in your setup? Honestly though, GP's setup looks pretty ordinary. It's probably a Chrome implementation bug, and the library author didn't put enough hacks into his product to work around the brokenness of the browser platforms.
- jerf 10y ago"Crashing your browser and/or computer" is definitely a recurring hazard with Show HN. But that's just the way it is. (With no offense intended towards JulianGarnier. I am assuming the additional risk and I am comfortable as long as it is not a deliberate hack attack.)
- snarkyturtle 10y agoWhat's the difference between this library and the Web Animations API? https://developers.google.com/web/updates/2013/12/New-Web-Animations-engine-in-Blink-drives-CSS-Animations-Transitions https://developers.google.com/web/updates/2013/12/New-Web-An...
- tbranyen 10y agoWeb Animations have barely any browser support, a pretty crummy API (IMO), and the Promise `finished` property which would differentiate itself from this library has still not been implemented anywhere yet :-/
- JulianGarnier 10y ago+1
- michaelbuddy 10y agoI'd like to see a visual animation editor that exports to this or greensock. You'll have some very happy designers at that point. I think theres also somewhat of a barrier to getting animations to be responsive. Maybe it's a good think js / html5 animation is hard still though. Keeps the web from being too kooky. Keeps bad ideas somewhat more at bay.
- ry_ry 10y agoOh I dunno, virtually every evolution of the web has been a reaction to what came before being roundly abused. Sometimes it takes following an approach to its illogical conclusion to recognise what needs fixing. I like to think of it as destructive testing of the medium ;)
- gt5050 10y agoThis looks great. Thanks for posting this. Is there a way we could export these animations as a gif ?
- JulianGarnier 10y agoNo, but you can record your screen using an app like Licecap (that's what I did for the documentation)
- KaoruAoiShiho 10y agoHow is this better than greensock / mo.js / popmotion.js?
- instakill 10y agoI deplore this kind of question. What value does this bring to you to ask it?
- khedoros 10y agoIt seems like an invitation to explain what this package brings to the table that others don't. You don't use a piece of software just because it's newer than the alternatives. I'm not familiar with any of the libraries mentioned, so any response would be more information than I currently have. It's unfortunate that their phrasing could also be interpreted as an attempt to question the usefulness of the new library, and might be read that way, depending on how obvious the reader thinks that the answer is.
- KaoruAoiShiho 10y agoUmm, this question isn't intended to be negative? I'm exploring a bunch of libraries right now and would like to know what advantages / disadvantages each lib has over one another. It would make all our lives a lot simpler if every new lib comes out with an explanation of its differentiators.
- JungleGymSam 10y agoRead it with an inquisitive tone, rather than a snarky one, and your emotions won't flare up.
- instakill 10y agoI did. This question still adds no value to the discussion.
- davnn 10y agoThe sad thing with animation libraries is, at least in my opinion, that in the end it comes down to a performance race. I loved popmotion at first, but once you hit the first performance bottleneck you can either contribute and fix performance issues yourself or choose a different library (most likely not the hip, new one). I do not want to convey the message that people should stop creating animation libraries, I think that innovation is great, but the road for such a library to be useful in production is a long one.
- deleted 10y ago[deleted]
- KaoruAoiShiho 10y agoHave you tried popmotion after the latest update?
- davnn 10y agoNo I haven't. Did not work on animations recently, but I may check it out again in the future!
- drdeca 10y agoI'm confused. What does this have to do with anime/why is this called anime?
- JulianGarnier 10y ago"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 https://en.wikipedia.org/wiki/Anime
- JungleGymSam 10y agoTo be fair, anime is a loaded term that _pretty much_ means one thing.
- beefsack 10y agoAwesome project and impressive demo, but these ambiguous project names are a really bad idea for a number of reasons.
- sriram_malhar 10y agoThe library looks really nice. It works great in Chrome, but the following SVG path animation does not on Safari (8.0.7), MacOS X (Yosemite, 10.10.4). http://codepen.io/juliangarnier/pen/dXNgVB?editors=0010 http://codepen.io/juliangarnier/pen/dXNgVB?editors=0010 Anyone else have this problem?
- threefour 10y agoIt's working for me: MacBook with 10.11.5 and Safari 9.1.1.