jQuery Animation Plugin & Tutorials with Example

SVG Circus : SVG Spinners Loaders Animation Creator

SVG Circus : SVG Spinners Loaders Animation Creator

SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds.

Traffico : jQuery Animated Cars & Trucks Plugin

Traffico : jQuery Animated Cars & Trucks Plugin

Traffico is a jquery plugin that allow you to insert some funny vehicle running from a side to another side of your website.

  • Cross browser support
  • Easy to integrate
  • Well documented and fully supported
  • 64 images for 5 different vehicles in 5 different preset colors
  • All the vehicles are avaiable in 2 different styles: detailed & flat
  • Possibility to write on trucks
  • You can create 200+ combinations to make your website become unique
  • You can set up the speed of each vehicle
  • You can set that vehicles appear only once or in an endless loop
  • 40 preset functions

ahRelax : JavaScript Scroll based Parallax Animations

ahRelax : JavaScript Scroll based Parallax Animations

Experimental lightweight JS script to facilitate quick scroll based animations.

Inspiration for Dialog Effects with CSS3 SVG

Inspiration for Dialog Effects with CSS3 SVG

A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.svg.

CSS3 Page Transitions

CSS3 Page Transitions

A rework of the original idea created by Hakim El Hattab. Created using JavaScript, CSS 3D transforms and CSS Animations.

  • Kontext: Original idea by Hakim El Hattab
  • Put On: A page drop effect
  • Circle: Layers do a circle transition
  • Bounce: Layers bounce after showing
  • Flip: 360º flip

Shifty : A teeny tiny tweening engine in JavaScript

Shifty : A teeny tiny tweening engine in JavaScript

Shifty is a tweening engine for JavaScript. It is a lightweight library meant to be encapsulated by higher level tools. At its core, Shifty provides:

  • Interpolation of Numbers over time (tweening)
  • Playback control of an individual tween
  • Extensibility hooks for key points in the tweening process

This is useful because it is the least amount of functionality needed to build customizable animations. Shifty is optimized to run many times a second with minimal processing and memory overhead, which is necessary to achieve smooth animations.

Walkway.js : Animate SVG elements

Walkway.js : Animate SVG elements

Walkway is an easy way to animate SVG elements.

Options:

  • selector (mandatory) – The selector of the parent element (usually will be a specific svg element)
  • duration – Time the animation should run for, in ms. Default is 400.
  • easing – Name of the easing function used for drawing. Default is ‘easeInOutCubic’. You can also supply your own function that will be passed the progress and should return a value in the range of [0, 1];

jQuery 3D Fold Scroll Animation

jQuery 3D Fold Scroll Animation

Responsive 3D Fold Animation on Scroll a jQuery plugin.

Story Tale : jQuery CSS3 Animation on Scroll

Story Tale : jQuery CSS3 Animation on Scroll

CSS 3 Animations Triggered on Scroll, but with a Twist of a Story.

3D Rotating Navigation with CSS3

3D Rotating Navigation with CSS3

A 3D rotating navigation, powered by CSS transformations. Animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.



Best jQuery websites design awards