Best jQuery Animation Plugins & Tutorials with Demo

Floating.js : JavaScript Animated Floating Elements

Floating.js : JavaScript Animated Floating Elements

Floating js is a animated float a number of things up on a page (hearts, flowers, emojis, words …).

Reveal : Scroll Reveal Animations jQuery Plugin

Reveal : Scroll Reveal Animations jQuery Plugin

Reveal is a scroll reveal animations framework with unlimited animation possibilities. Reveal animations can be used with any element in your page. Built with the use of jQuery, GSAP and Animus, Reveal is guaranteed to offer an unmatched scroll reveal animation and design experience.

SlideBox : jQuery Animated Sliding Box

SlideBox : jQuery Animated Sliding Box

A simple light-weight jQuery plugin that makes a <div> (or another block element) moving from outside the page to one side of your choice when scrolling to a specific point.

  • uses .animate() with callback function
  • all directions are customizable
  • can be triggered when any DOMElement is visible or at any specific offset
  • closing option for the whole session on the page available

Tilt Hover Effects with CSS & JavaScript

Tilt Hover Effects with CSS & JavaScript

Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website.We want to animate an image (which could be a link or simply a normal grid item) with a tilt effect on its parts. Having several elements in the item (that we call “tilter”), we can achieve a variety of effects that look very interesting. There’s the image, the “shine” element, the semi-transparent overlay with a colorful gradient, a border element and the caption.

Timeline Framework with HTML5 & CSS

Timeline Framework with HTML5 & CSS

AWSM Timeline’ is a pack of super cool and interactive timeline layouts for your website. It is rather a basic framework which you can use to build your own style of timeline layouts by making some basic CSS changes. This documentation will help you to integrate the layout easily into your existing HTML files.

Foxholder : Unique Placeholder Animations with jQuery

Foxholder : Unique Placeholder Animations with jQuery

Foxholder is a Pack of 15 unique placeholder animations with jQuery. Just pick the demo you like most and install on your website in 1 minute!

Create a Dynamic Point Mesh Animation with HTML5 Canvas

Create a Dynamic Point Mesh Animation with HTML5 Canvas

A great tutorial by Dudley Storey where he teaches how to master a dynamic point mesh animation using Canvas.

Cubes Advent Calendar with CSS & JavaScript

Cubes Advent Calendar with CSS & JavaScript

A 3D cubes Advent calendar with fun hover effects and background color animations. Clicking the boxes opens another content level with different element animations.

zMotion.js : Remake of zPath.js without jQuery

zMotion.js : Remake of zPath.js without jQuery

A remake of zPath.js without jQuery and with more features.

Aquarelle : JavaScript Watercolor Effect Library

Aquarelle : JavaScript Watercolor Effect Library

Aquarelle is a library for creating magnificent watercolor effects. You can use Aqaurelle to add a fade-in animation to images and make them look as they are being painted on by smudged drops of paint. Built on top of the 3D canvas library Three.js.



Best jQuery websites design awards