Show HN: Anime.js – Polyvalent JavaScript Animation Engine

283 points by JulianGarnier 9 years ago | 73 comments
  • JulianGarnier 9 years ago
    This is a javascript animation library that I made and used on my latest projects. The source and documentation are on Github. Feedbacks are welcome!
    • tlrobinson 9 years ago
      What does "polyvalent" mean in this context?
      • JulianGarnier 9 years ago
        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.
        • JulianGarnier 9 years ago
          Ok so I went with "flexible", I'm not 100% sure yet, but that will do the job for now
        • JulianGarnier 9 years ago
          Can works with CSS / SVG / Canvas animations
          • nekopa 9 years ago
            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

            • bshimmin 9 years ago
              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.

              • lucideer 9 years ago
                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.

                • cr3ative 9 years ago
                  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!
                  • shawn-butler 9 years ago
                    Maybe polyamorous?
                    • clentaminator 9 years ago
                      Another example of developers borrowing terms from other subjects in an effort to big up their projects. See: "Isomorphic" JavaScript.
                    • spoiler 9 years ago
                      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.
                      • stcredzero 9 years ago
                        It means some 20 or 30 something didn't bother to see if there was already a previously existing term, and decided to jump on the "polyfill" bandwagon because it seems cool.
                        • greenshackle 9 years ago
                          No, it means he is french. I am french and understood immediately.

                          It's a valid but rarely used word in english. It means flexible, or 'with many functions/uses', or 'good at many things'.

                      • leetrout 9 years ago
                        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"?

                        [1] http://greensock.com/gsap

                        • JulianGarnier 9 years ago
                          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).
                      • code_research 9 years ago
                        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!

                        • JulianGarnier 9 years ago
                          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?

                          • code_research 9 years ago
                            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?

                            • GreenSock 9 years ago
                              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.
                              • zachrose 9 years ago
                                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.

                            • dgreensp 9 years ago
                              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.

                            • mdolon 9 years ago
                              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!

                            • davnn 9 years ago
                              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.

                              • 9 years ago
                                • KaoruAoiShiho 9 years ago
                                  Have you tried popmotion after the latest update?
                                  • davnn 9 years ago
                                    No I haven't. Did not work on animations recently, but I may check it out again in the future!
                                • trollboll 9 years ago
                                  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

                                  • JulianGarnier 9 years ago
                                    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.
                                  • guessmyname 9 years ago
                                    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"
                                    • ghostly_s 9 years ago
                                      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.
                                      • TeMPOraL 9 years ago
                                        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.

                                      • jerf 9 years 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.)

                                        • amenod 9 years ago
                                          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 / ...
                                      • snarkyturtle 9 years ago
                                        What's the difference between this library and the Web Animations API? https://developers.google.com/web/updates/2013/12/New-Web-An...
                                        • tbranyen 9 years ago
                                          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 :-/
                                      • michaelbuddy 9 years ago
                                        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.
                                        • ry_ry 9 years ago
                                          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 ;)

                                        • KaoruAoiShiho 9 years ago
                                          How is this better than greensock / mo.js / popmotion.js?
                                          • instakill 9 years ago
                                            I deplore this kind of question. What value does this bring to you to ask it?
                                            • KaoruAoiShiho 9 years ago
                                              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.

                                              • khedoros 9 years ago
                                                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.

                                                • JungleGymSam 9 years ago
                                                  Read it with an inquisitive tone, rather than a snarky one, and your emotions won't flare up.
                                                  • instakill 9 years ago
                                                    I did. This question still adds no value to the discussion.
                                              • Secretmapper 9 years ago
                                                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!

                                                • sriram_malhar 9 years ago
                                                  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?

                                                  • threefour 9 years ago
                                                    It's working for me: MacBook with 10.11.5 and Safari 9.1.1.
                                                  • gt5050 9 years ago
                                                    This looks great. Thanks for posting this.

                                                    Is there a way we could export these animations as a gif ?

                                                    • JulianGarnier 9 years ago
                                                      No, but you can record your screen using an app like Licecap (that's what I did for the documentation)
                                                    • beefsack 9 years ago
                                                      Awesome project and impressive demo, but these ambiguous project names are a really bad idea for a number of reasons.
                                                      • drdeca 9 years ago
                                                        I'm confused. What does this have to do with anime/why is this called anime?
                                                        • JulianGarnier 9 years 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
                                                          • JungleGymSam 9 years ago
                                                            To be fair, anime is a loaded term that _pretty much_ means one thing.
                                                        • surkin 9 years ago
                                                          Impressive.
                                                          • 9 years ago