Best jQuery Animation Plugins & Tutorials with Demo

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.

Between.js : Lightweight JavaScript (ES6) Tweening library

Between.js : Lightweight JavaScript (ES6) Tweening library

Between.js is a lightweight JavaScript (ES6) tweening library.Make tweening usage convenient and powerful. There are certain things that we were following while developed this library, we wanted to make it:

  • Lightweight – The library is only 8.3 Kb
  • Performant – It uses optimization patterns to speed up & smooth animation.
  • Modern – The library is written in ES6

Slide Out Box Menu with CSS Grid & TweenMax

Slide Out Box Menu with CSS Grid & TweenMax

Today we’d like to share a little menu with you. The idea is to reveal the boxes of a grid individually from the top right corner of the page similar to the Expanding Grid Menu we did a while back. The animations are powered by TweenMax.