Best jQuery Animation Plugins & Tutorials with Demo

Splitting.js : JavaScript library to Split an element by Words & Characters

Splitting.js : JavaScript library to Split an element by Words & Characters

Splitting.js is a JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!

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.

Grid Layout with Scrollable Content View

Grid Layout with Scrollable Content View

Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.

Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

Today we’d like to share a simple fullscreen menu with you. The menu layout is powered by CSS Grid and we make its boxes appear with a reveal animation. The animations are made using TweenMax.

SpriteJS : A lightweight 2D Render Object Model

SpriteJS : A lightweight 2D Render Object Model

SpriteJS is a lightweight 2D canvas rendering engine for modern browsers. Manipulate the sprites in canvas as you do with the DOM elements.

SpriteJS can be used with D3.js, Proton and Matter-js.

Features:

  • Manipulate the sprites element as you do with the DOM elements.
  • Perform fast drawing with smart cache.
  • Multiple layers.
  • Web Animations Api
  • Controllable event dispatching.
  • Object Oriented Programmed Development with ES6+
  • Server-side render. Work with node-canvas.
  • Weixin Apps

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