Animation examples

Various examples of web animations.
All examples are made to work cross browser (Chrome, Firefox, Safari, IE10+, Edge), either in the original form, or with a fallback. The exeption is the Bodymovin example, because of an unperfect export of the animation from AE, which is a common occurence if the animation that has to be generated is nontrivial.

1. Spritesheet
   Technologies used: CSS3, translate3d and animation with steps functions
   Preview: http://htmlpreview.github.io/?https://github.com/magla/animation-examples/blob/master/spritesheet/index.html

2. Bodymovin
   Exported animation from After Effects rendered as SVG
   Designer of animation: Sonja Račanović

3. SVG
   Clip reveal animation with images on hover
   As seen here: http://codepen.io/magda_ena/pen/ygQdjM
   Technologies used: GSAP and Morph SVG plugin (only for GSAP club members)

   SVG path animation
   As seen here: https://codepen.io/magda_ena/pen/mRmOxy
   Technologies used: jQuery 3.1.1

4. Slider
   Image slider with a clip/translate effect
   Technologies used: SASS, GSAP, GSAP CSS Plugin, and jQuery

5. Canvas
   PreloadJS example of loading images in canvas the fast way
   EaselJS library for the canvas manipulation
   As seen in use here: http://www.north2.net/about-us.html
   The json data is for example only