Best jQuery Animation Plugins & Tutorials with Demo

Easy Wheel : jQuery Easy Controlled Wheel of Fortune

Easy Wheel : jQuery Easy Controlled Wheel of Fortune

Easywheel is a jQuery Plugin created to allow you to Build and Controle the Wheel of fortune.

Features:

  • 70% of styles is Editable with JSON Parameters.
  • You can choose the winner from parameters or Remotely from your server using AJAX.
  • 100% Responsive and compatible with any resolution.
  • There no Third-party libraries ( Except jQuery ) is required to run the plugin.
  • The generated SVG is customizable via JSON/CSS.

Anime.js : JavaScript Animation Engine

Anime.js : JavaScript Animation Engine

Anime.js is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

Features:

  • Keyframes: Chain multiple animation properties.
  • Timeline: Synchronize multiple instances together.
  • Playback controls: Play, pause, restart, seek animations or timelines.
  • CSS transforms: Animate CSS transforms individually.
  • Function based values: Multiple animated targets can have individual value.
  • SVG Animations: Motion path, line drawing and morphing animations.
  • Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.

Mo.js : Motion Graphics Toolbelt for the Web

Mo.js : Motion Graphics Toolbelt for the Web

Mo.js is a motion graphics toolbelt for the web.Silky smooth animations and effects for staggering user’s experience.Screen density independent effects look good on any device.

Decorative Letter Animations with CSS & Anime.js

Decorative Letter Animations with CSS & Anime.js

Today we’d like to share some fun letter animations with you. The idea is based on Animography’s Dribbble shot “Us By Night” where various little shapes animate with some letters. We wanted to explore some similar animations using different typographies and shape effects. We are using anime.js for the animations and Charming for working with the words.

CSS Glitch Effect

CSS Glitch Effect

Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it.

3D Particle Explorations with with Three.js

3D Particle Explorations with with Three.js

This set of demos explores 3D particle animations using three.js and easing. All of the particles and shapes in these demos are made from basic geometry/material/mesh sets in three.js, such as spheres, lines, and boxes.

Creative SVG Strokes Animation

Creative SVG Strokes Animation

SVG stroke animations are nothing new, but when using a more complex drawing that is basically made of strokes, then we can create a very original looking effect. Using many different colors and adding some other element animations, we can bring a very unique looking illustration to live.

For the animation we are using GSAP’s sequencing tool TimelineMax and the DrawSVGPlugin.

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.