Best jQuery Animation Plugins & Tutorials with Demo

jQuery Blink Animation Plugin

jQuery Blink Animation Plugin

jQuery plugin to blink animation effect on any html element.

Morphing Page Transition with CSS & SVG

Morphing Page Transition with CSS & SVG

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use Charming. In the demos we use an “intro transition” in order to showcase the effect, but that’s of course only one of the many use cases for this kind of page transition.

Inspiration for Menu Hover Effects with CSS & JavaScript

Inspiration for Menu Hover Effects with CSS & JavaScript

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.

Animated Image Pieces with JavaScript & CSS

Animated Image Pieces with JavaScript & CSS

A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments. Powered by anime.js.

jQuery Border Color Animate Plugin

jQuery Border Color Animate Plugin

jQuery plugin to animate border color.

Organic Shape Animations with SVG clipPath

Organic Shape Animations with SVG clipPath

Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.

After playing with some on-scroll morphing background shapes, we wanted to explore some hover effects in this demo. By morphing SVG paths we can create some organic, flowy movements on hover. Doing so on an SVG clipPath allows us to use this effect on an image.

ScrollPress : jQuery plugin to make a Smooth Animation on Scroll Top

ScrollPress : jQuery plugin to make a Smooth Animation on Scroll Top

ScrollPress is a jQuery plugin to make a Smooth Animation on Scroll Top.

Features:

  • Animate scroll top
  • Animate DOM elements scroll top
  • JQuery UI easing functions
  • Back to top button
  • Fade in button with animation
  • Animation when click on button
  • Animate self link ( href + ID )
  • Scroll between elements with custom ease and duration

AOS : Animate on Scroll JavaScript Library

AOS : Animate on Scroll JavaScript Library

Aos is a small library to animate elements on your page as you scroll.

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down.

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.



Best jQuery websites design awards