Author: - Post Category: Javascript, Resources - Date:December 22, 2019

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.

Categories: Javascript and Resources. Tags: Animations, html5, JavaScript, and SVG.

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 WebsiteGetting StartedDocumentation
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!

Official Website

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.

Offical WebsiteGitRepository