Show HN: Anime.js – Polyvalent JavaScript Animation Engine
anime-js.comThis is a javascript animation library that I made and used on my latest projects. The source and documentation are on Github. Feedbacks are welcome!
What does "polyvalent" mean in this context?
It means "multipurpose", polyvalent is a really common word in French, but apparently doesn't have the same signification in English, or is less common. I'll replace it by something else.
Ok so I went with "flexible", I'm not 100% sure yet, but that will do the job for now
Can works with CSS / SVG / Canvas animations
I would like to add to the other comments, in that I had no idea what polyvalent meant too.
I am going to make a wild guess in the dark here, and say that English isn't your first language (I sincerely apologize if I'm wrong). If this is true, did you try to translate a word from your native language into English, or are you a chemist ;)
I know exactly what you're trying to say with the term, but I think you could have much better uptake of your software if you found a word which conveys what you want to convey to a programmer audience.
After looking at the etymology of the word and your explanation of what it means, may I humbly put forward a couple of alternatives, and I am sure HN users could contribute more:
Anime.js is a multi-target yet lightweight Javascript animation library.
Anime.js is a flexible yet lightweight Javascript animation library.
Anime.js is a multi-framework yet lightweight Javascript animation library.
Anime.js is a polygamous yet lightweight (and STD free!) Javascript animation library.
The last entry is a feeble attempt at humour.
P.S. Great job on the library, especially keeping it lightweight
As a Spaniard myself, I am baffled since it is a word kind of common in the sciences. I don't think it's a translator problem, it might be a false friend problem; in Spanish it's "polivalente" instead of "polyvalent"
I would say that, from knowing the Spanish meaning AND use, there is no "decent" translation since it can be precise or simple, but not both. But this is the one I like most even though it has slightly different meaning:
- Anime.js is a flexible yet lightweight Javascript animation library.
I'm pretty sure not many people will understand what the word means in this context, and I would strongly suggest removing it. "valency" has specific meanings in chemistry and grammar, and I think it's not well-known outside of those contexts, and I'm not certain it really means what you want it to mean here.
That aside, this looks seriously awesome - the animation along the SVG path is great! The API also looks very pleasant.
I'm not a chemist, and I immediately understood this to mean "readily interacts/combines with multiple things", though my understanding did come directly from my (limited, school-level) chemistry, so it's certainly domain-specific terminology that mightn't cross too well to web dev.
Also, perhaps more importantly, it wasn't clear what things (rendering tech) the valencies were with until your comment.
I 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!
Haha thanks! Any suggestions for an alternative word?
"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.
It'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)
Maybe polyamorous?
Another example of developers borrowing terms from other subjects in an effort to big up their projects. See: "Isomorphic" JavaScript.
I feel that may be a little unfair. Maybe he comes from that subject, maybe that seemed like the best word to describe his effort?
I don't have the feeling that this is a corporation trying to bamboozle us with marketspeak.
He is French from Paris and yes in this context polyvalent === flexible.
Polyvalent in French rather means someone with multiple competencies, or something which can be used in more than one way.
That's what I thought. So maybe we need to work on the word flexible, and apply it to his library.
It might be a language issue. In Portuguese "polivalente" is a very common word meaning something has many functions. Nobody thinks of chemistry upon hearing it.
An English equivalent might be multifunctional then, or flexible, as other comments have suggested.
Just 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.
Do 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"?
GSAP 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).
Have you seen or used https://github.com/Popmotion/popmotion/? These both seem fairly similar, both small libraries with a lot of overlap.
Popmotion minified is over 45kB, almost 8x as large as Anime.js.
I guess their frontpage
>Popmotion is a lightweight 12kb JavaScript motion engine that makes creating engaging user interactions quick and simple.
Is slightly outdated now
This 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!
Regarding 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?
Is the sequential concept of a timeline a good conceptual representation for asynchronous events that my run at different speeds?
I had in mind more kind of a matrix, but I am asking here to gain knowledge from people that already must have been thinking more about this than me.
How do you handle dozens or hundreds of animation events?
Congrats on the release! You said Anime is equal or better than other JS libraries in terms of performance - were you including GSAP? In my tests, GSAP was significantly faster under stress: http://greensock.com/js/speed.html. Am I missing something? Do you have a test that shows otherwise? I don't mean that to detract from your hard work at all. Clearly you put a lot of effort into this, and I know how hard it is to pack in features and keep performance up and file size down. I applaud the file size achievement.
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.
Hm, I don't recall seeing multiple RAFs in that demo. GSAP is all driven by a single one. And yes, I totally agree that nobody should place too much weight on just one performance test. I always advocate people doing their own tests which is why I was wondering if you had one that showed anime matching/exceeding GSAP's speed. No big deal, though. Just curious. Congrats again!
I 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
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.
thanks, 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).
Hmm, 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.
The 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.
Simply 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)
This 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!
The 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.
Have you tried popmotion after the latest update?
No I haven't. Did not work on animations recently, but I may check it out again in the future!
Very nice but it explodes my work laptops CPU (running ubuntu 16.04 + chrome 50) even just idling on http://anime-js.com/
Im guessing you need to add some "sleep" somewhere
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.
Heres a cpu profile from the same computer as mentioned above: https://gist.github.com/anonymous/9bcabea8eedec8e1c671516b3a...
Here's a CPU profile from my Windows desktop (Chrome, v. 51.0.2704.103) if it's any help to you: https://ameo.link/u/2hr.cpuprofile
Jesus! 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"No 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.
Maybe 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.
"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.)
To be fair, this is not (just) OP's fault. Under no circumstances should just visiting a page render your computer unusable, your browser should protect you from that. I know that none of them do, but sooner or later browser vendors will have to realize that they have become the new OS and act accordingly (that is, allow user to easily control misbehaving pages - see their resource consumption, limit them, kill them...). Never should your computer become unresponsive just because some page wanted more CPU time / memory / ...
What's the difference between this library and the Web Animations API? https://developers.google.com/web/updates/2013/12/New-Web-An...
Web 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 :-/
+1
I'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.
Oh 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 ;)
How is this better than greensock / mo.js / popmotion.js?
I deplore this kind of question. What value does this bring to you to ask it?
Umm, 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.
It 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.
Read it with an inquisitive tone, rather than a snarky one, and your emotions won't flare up.
I did. This question still adds no value to the discussion.
Totally 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!
The 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
Anyone else have this problem?
It's working for me: MacBook with 10.11.5 and Safari 9.1.1.
This looks great. Thanks for posting this.
Is there a way we could export these animations as a gif ?
No, but you can record your screen using an app like Licecap (that's what I did for the documentation)
Awesome project and impressive demo, but these ambiguous project names are a really bad idea for a number of reasons.
I'm confused. What does this have to do with anime/why is this called 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
To be fair, anime is a loaded term that _pretty much_ means one thing.
Impressive.