Best jQuery Animation Plugins & Tutorials with Demo

Decorative WebGL Backgrounds with TweenMax

Decorative WebGL Backgrounds with TweenMax

Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle interactivity. All the demos are made with the Three.js WebGL library to create the various shapes, and the animations are controlled by the performant GSAP animation library.

Animated Direction Reveal Effect with JavaScript

Animated Direction Reveal Effect with JavaScript

This plugin detects which direction a user enters/exits a block, allowing you to reveal/hide content based on this direction.

The hidden content can animate in from the direction the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects.

jTextEffect – jQuery Text Animation Effects

jTextEffect - jQuery Text Animation Effects

This plugins contains 15 text animation effects. The features are :

  • Can be used as a text slider
  • Simple, dynamic and easy.
  • Supported by all major browsers
  • Can be used as newsticker.
  • Effect can be applied on a single text.
  • easy to use.

Animated SVG Frame Slideshow

Animated SVG Frame Slideshow

Today we’d like to share an experimental slideshow with you. The idea is to animate an SVG frame while we transition from one slide to another. Using different shapes we can create a variety of frame styles when morphing the SVG path. We are using anime.js for the animations.

AnimSequence : Simple Animation Controller with Timeline

AnimSequence : Simple Animation Controller with Timeline

AnimSequence is a simple lightweight library for high performance animation in a web page, make preparations for each frame and call the frames with optimized timeline for animation.

Emergence.js : Detect Element Visibility in the Browser

Emergence.js : Detect Element Visibility in the Browser

Emergence.js is a lightweight, high-performance JS plugin for detecting and manipulating elements in the browser. It gives the developer the freedom to use their own CSS or JS to determine what happens; whether it’s animation or a change in state. It leverages HTML5 data-* attributes instead of classes for ease and developer clarity. Emergence.js is one of the lightest and most compatible plugins of its kind.

Pasition : Path Transition with JavaScript

Pasition : Path Transition with JavaScript

Pasition is a path transition with little JS code, render to anywhere.

jQuery Bubble Text : Animated Text Effect Plugin

jQuery Bubble Text : Animated Text Effect Plugin

jQuery Bubble Text plugin introduces one animated way of changing text.

T-Scroll : JavaScript library to Animate Elements on Scroll

T-Scroll : JavaScript library to Animate Elements on Scroll

T-Scroll is a JavaScript library for applying animation when an element is visible in the viewport. It is equipped with a handful of options and preset animations.

Animator.js : Jquery Plugin to support Animate.css

Animator.js : Jquery Plugin to support Animate.css

Animator.js is a jquery plugin to support animate.css