Best jQuery Animation Plugins & Tutorials with Demo

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

Performs a smooth 2D/3D transition from one HTML element A to another element B.

Features:

  • Runs a single transition or a sequence of transitions;
  • Transition effect is automatically computed between two slides;
  • Fallbacks to browsers that do not support 3D transformations and CSS3 animations;
  • Highly customizable:
    • Any markup you want. Only restriction is sliders to be contained in a parent blocked element;
    • Strong event driven support;
    • Single transition or a sequence of transitions (movie mode);
    • Transition duration, easing function animation and zoom vertexes;
    • Optional user zoomming and panning between each transition.
  • Responsive design, suitable for any window sizes;

Flip Box : jQuery Bootstrap Flipping Card

Flip Box : jQuery Bootstrap Flipping Card

Flip Box is a simple and easy customizable flip animation. It’s made with Bootstrap responsive design and some awesome animations. It’s solution for creating beautiful Flip Boxs or Flip Cards without customize any javascript code. It has 12+ Layouts, Click Flip Effect, Hover Flip Effect, Vertical & Horizontal Flip and other lots of customization options and can be easily integrated to any website.

flubber : Tools for Smoother Shape Animations

flubber : Tools for Smoother Shape Animations

flubber is a tools for Smoother Shape Animations.Some best-guess methods for smoothly interpolating between 2-D shapes.

Letter Effects and Interaction Ideas with CSS

Letter Effects and Interaction Ideas with CSS

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters. We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.

Warp drive : jQuery HTML5 canvas based Starfield effect.

Warp drive : jQuery HTML5 canvas based Starfield effect

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Playful Little Tooltip Ideas with SVG & JavaScript

Playful Little Tooltip Ideas with SVG & JavaScript

Today we’d like to share a couple of simple tooltip animation ideas with you. The tooltips have different shapes mostly made of SVGs and we are animating them with anime.js. Some of these bouncy fellas use SVG path morphing, others transforms and one is a simple text effect.

On-Scroll Morphing Background Shapes with SVG

On-Scroll Morphing Background Shapes with SVG

Today we’d like to share a little background effect with you. The idea is to animate a decorative SVG shape on scroll. The shape is morphing into different forms depending on the section we are currently viewing. The animations are powered by Julian Garnier’s anime.js and the scroll detection is supported by Stu Kabakoff’s scrollMonitor.js.

Folder Preview Ideas with CSS

Folder Preview Ideas with CSS

oday we’d like to share some fun little hover effects with you. The idea is to show a preview animation for folders. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder. We are using anime.js to power the animations.

Ramjet : Animated Morph DOM Elements

Ramjet : Animated Morph DOM Elements

Morph DOM elements from one state to another with smooth animations and transitions.

Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we’re transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we’re transitioning from) has exactly the same position and dimensions as the second element originally did.

STIMED.js : jQuery plugin for controlling CSS styles over Time

STIMED.js : jQuery plugin for controlling CSS styles over Time

STIMED.js is a jQuery plugin for controlling CSS styles over time. There are almost endless possibilities for using timed CSS properties. You could change webpage colors to make them more calm at night and more contrast during daytime, or hide a specific element in a certain time, or just move an element in sync with time…



Best jQuery websites design awards