8 ms·
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!
by JulianGarnier 10y 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!
- 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)