/animation-examples

Various examples of web animations

Primary LanguageHTML

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