Best jQuery Animation Plugins & Tutorials with Demo

AniCollection : Collection of CSS Animations

AniCollection : Collection of CSS Animations

AniCollection is a collection of awesome CSS3 animations from many libraries and many people. To give you an easy way to find, use and share it.

First Person Sunglasses with CSS & JavaScript

First Person Sunglasses with CSS & JavaScript

Today we’d like to share a fun little experiment with you: a geeky “try-on” sunglasses effect. It’s not a “try-on” in the classical sense for previewing how the sunglasses might look on a person, but instead how the view looks like when putting on some sunglasses and looking through them. For that we use a simple overlay effect and some animations to mimic the movement you do when you try on glasses from the first person perspective.

P2.js : JavaScript 2D physics library

P2.js : JavaScript 2D physics library

2D rigid body physics engine written in JavaScript. Includes collision detection, contacts, friction, restitution, motors, springs, advanced constraints and various shape types.

Inspiration for Search UI Effects with CSS & JavaScript

Inspiration for Search UI Effects with CSS & JavaScript

Today we’d like to share a couple of ideas for search interaction effects with you. Mainly, we’d like to provide you with some inspiration for how to show the search interface in an interesting way. Maybe you’ve seen some modern animations for showing the search already, like Swiss Army Man or CMMNTY. Today we want to explore some different layouts combined with some engaging CSS animations.

jQuery SVG Animated PopUp

jQuery SVG Animated PopUp
  • There is a solution – the jQuery-the svg-popup .
  • Quick – the formation of the particles based on the basis of SVG.
  • Easy – just plug weight 5kb.
  • Easy to use – it has documentation in Russian.
  • Eto decision to diversify the design of your site, and give the uniqueness and style!

Particler : JavaScript Animated Canvas Particles Plugin

Particler : JavaScript Animated Canvas Particles Plugin

Particler is a pure javascript plugin which creates a canvas-particles based on your image. You can easy set up behavior of particles and make awesome stuff.

Features:

  • No dependencies — pure javascript;
  • Simple usage;
  • Easy customisation;
  • 15 options to set up particles behavior;
  • Small size — only 7kb minified, 3kb gzipped;
  • Good documentation and examples;
  • 3 built-in particle shapes.

Cannon.js : JavaScript 3D Physics Engine

Cannon.js : JavaScript 3D Physics Engine

A lightweight 3D physics engine written in JavaScript. Inspired by three.js and ammo.js, and driven by the fact that the web lacks a physics engine, here comes cannon.js. The rigid body physics engine includes simple collision detection, various body shapes, contacts, friction and constraints.

Features:

  • Rigid body dynamics
  • Discrete collision detection
  • Contacts, friction and restitution
  • Constraints
    • PointToPoint (a.k.a. ball/socket joint)
    • Distance
    • Hinge (with optional motor)
    • Lock
    • ConeTwist
  • Gauss-Seidel constraint solver and an island split algorithm
  • Collision filters
  • Body sleeping
  • Experimental SPH / fluid support
  • Various shapes and collision algorithms

iTyped : Dead simple Javascript Animated Typing

iTyped : Dead simple Javascript Animated Typing

iTyped is a dead simple Javascript animated typing, with no dependencies. iTyped has a tiny size and easy to use.

sparkleHover.js : jQuery Animated Sparkles Plugin

sparkleHover.js : jQuery Animated Sparkles Plugin

sparkleHover is a jQuery plugin to add sparkles to anything on hover.

CSS Animated Letters Effect

CSS Animated Letters Effect

Short and funny phrases using CSS3 to make the animation.



Best jQuery websites design awards