JavaScript Animations | HTML5 Elements and SVG
Resources for animations and SVG
Two popular tools to animate your website html5 elements and svg images worth to try.
Tools to animate HTML5 elements and SVG using JavaScript:
Gsap:
GSAP is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers.
TweenMax (opensource, free):
TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), staggered tweens, and more
TweenLite (opensource, free):
TweenLite is the fast, lightweight, and flexible core of GSAP (GreenSock Animation Platform), a JavaScript library for HTML5 animation.
TimelineMax (opensource, free):
TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() and more.TimelineMax is GSAP’s most powerful and feature-packed sequencing tool.
TimelineLite (opensource, free):
TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time.
SVG Drawing and morph animation
SnapSVG(opensource, free):
The JavaScript SVG library for the modern web.
SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
Official Website – Getting Started – Documentation
Download source code
MorphSVG (paid):
Morph any SVG shape into any other shape smoothly regardless of the number of points in each. One of our most popular plugins that creates fun, unique effects!
Anima.js
Anime.js (/ˈæn.ə.meɪ/
) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.