We are exploring APIs for our programming 2 course and we have chosen GreenSock. GreenSock is an animation library that can animate the DOM or data and can be used with other libraries like PIXIjs to create rich animated graphics.
It's a great library when you need to add motion to interactive prototypes. GreenSock seems to be the industry standard and is battle tested. There are a couple of useful plugins but at a high price.
If you want some of the functionality of the plugins for free you can check out Anime.js. This library is not as performant, tested or browser compatible, but that may not be a concern.
All examples can be run offline without installing any extra dependencies. Just open the index.html in each example folder.
examples/tween-light
is an easy tween back and forth.examples/stagger-to-yoyo
is a simplestaggerTo
showing the yoyo effect and infinite repeat.examples/stagger
is a more advanced animation usingTimeLine
to animate with more steps.examples/draw-text
is an example of how you can use animated data to move graphics.