Best jQuery Animation Plugins & Tutorials with Demo

Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

Integrated-2D – is an Open source Javascript framework for rendering 2D graphics on SVG, Canvas and WebGL contexts. I2D’s simple syntax and semantics lets you combine the power of Vector graphics and Bitmap to achieve complex visualisations easily.

I2Djs provides single Application Programming Interface to create and animate elements across different graphic rendering contexts by leveraging their underlying capabilities. Developers can make use of I2D’s multi-layered contextual approach with capabilities from more than one context seamlessly for creating powerful composite visualisation under a single roof.

I2D also provides a unique data-driven approach with join-actions for DOM manipulation based on data binding.

Sal.js : Lightweight Scroll Animation library

Sal.js : Lightweight Scroll Animation library

Sal.js is a performance focused, lightweight scroll animation library.Sal (Scroll Animation Library) is written with aim to provide performant and lightweight solution for animating elements on scroll. It’s based on the Intersection Observer, which gives amazing performance in terms of checking the element’s presence in viewport.

Rotator : jQuery plugin for Rotating Text & Words with CSS3

Rotator : jQuery plugin for Rotating Text & Words with CSS3

Rotator is a lightweight and customizable jQuery plugin for rotating text and some words of your text with awesome CSS3 animations.

Animate Images and Videos with curtains.js

Animate Images and Videos with curtains.js

curtains.js was created with just that issue in mind. It is a small vanilla WebGL javascript library that converts HTML elements containing images and videos into 3D WebGL textured planes, allowing you to animate them via shaders.
You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.

Diagonal Slideshow with JavaScript & CSS

Diagonal Slideshow with JavaScript & CSS

A slideshow with a “diagonal” look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.The animations are powered by TweenMax.

Whs.js : Super-fast 3D framework for Web Applications & Games

Whs.js : Super-fast 3D framework for Web Applications & Games

whs.js is a framework for 3D web apps built with Three.js technology.It implements a core with component system and plugin support for fast development of 3D scene with physics.

Features:

  • gem Simple in usage
  • rocket Speeds up 3D scene prototyping
  • electric_plug Component based scene graph
  • bomb Simple integration of any high performance physics even with Worker (Multithreading)
  • dizzy Automatization of rendering
  • new ES2015+ based
  • large_blue_diamond Extension system (modules)
  • package Webpack friendly
  • heavy_check_mark Integrated Three.js rendering engine
  • revolving_hearts Work with whs.js and Three.js at the same time

Canvallax.js : Easy Parallax Effects on Canvas

Canvallax.js : Easy Parallax Effects on Canvas

Canvallax is a small (5.8kb minified, 2.1kb gzipped) dependency-free Javascript library for managing elements on <canvas>. Support is built-in for:

  • Parallax Scrolling, with optional damping to smooth motions
  • Pointer Tracking
  • Distance/scaling
  • Images on Canvas, from URLs or nodes (<img /><canvas />, etc) with Canvallax.Image
  • Common shapes (Canvallax.CircleCanvallax.Polygon and Canvallax.Rectangle)
  • Element stacking with zIndex
  • Fixed position Elements
  • Element cloning

Bu.js : JavaScript 2D Canvas Graphics library

Bu.js : JavaScript 2D Canvas Graphics library

Bu.js is a JavaScript 2D graphics library based on HTML5 Canvas.

Splitting : JavaScript microlibrary to Split an element by Words & Characters

Splitting : JavaScript microlibrary to Split an element by Words & Characters

Splitting is a JavaScript microlibrary to split an element by words, characters, children and more, populated with CSS variables!

Most Splitting methods utilize a series of <span>s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.

Micron.JS : MicroInteraction library with CSS Animations & JavaScript

Micron.JS : MicroInteraction library with CSS Animations & JavaScript

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript.

Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.