Best jQuery Animation Plugins & Tutorials with Demo

VHS : Post-future CSS animations

VHS : Post-future CSS animations

VHS is a Post-future css animations library.

wickedCSS : A library for CSS3 Animations

wickedCSS : A library for CSS3 Animations

wickedCSS is a library for CSS3 Animations.The animations include regular CSS3 animations to be used in all settings. Additionally, the library includes a number of wicked animations, which aren’t applicable in all situations. They can be fun to play with.

Elastic Slider : Animated Slider with SVG clip-path

Elastic Slider : Animated Slider with SVG clip-path

Elastic Slider is an experimental slider using SVG clip-path feature and animations powered by Snap.svg.

A-Frame : Web framework for building Virtual Reality Experiences

A-Frame : Web framework for building Virtual Reality Experiences

A-Frame is a web framework for building virtual reality experiences.Make WebVR with HTML and Entity-Component Works on Vive, Rift, Daydream, GearVR, desktop.A-Frame can be developed from a plain HTML file without having to install anything.

Features: Hit the ground running with A-Frame’s built-in components such as geometries, materials, lights, animations, models, raycasters, shadows, positional audio, tracked controllers. Get even further with community components such as particle systems, physics, multiuser, oceans, mountains, speech recognition, or teleportation!

Elastic Range Input with SVG & Anime.js

Elastic Range Input with SVG & Anime.js

In this tutorial we will see how we can simulate the behavior of a range input, with an elegant component. Fancy component to simulate a range input, based on this dribbble shot by Stan Yakusevich.

To code it, we will mainly use SVG to draw the paths, and anime.js to perform the animations.

ReboundGen : Editable CSS3 Animations Library

ReboundGen : Editable CSS3 Animations Library

REBOUNDGEN calculates springy CSS3 Keyframe animations based on a few simple parameters you define. It uses Facebook’s Rebound.js for the math and outputs SCSS style sheets for each animation. So, you can import just the ones you need. A variety of nice animations can be accomplished using a small set of parameters.

Splash Transition with CSS and SVG

Splash Transition with CSS and SVG

In this tutorial we’ll be creating an eye catching animation, just using SVG paths and CSS transitions. To make things easier, we will also be using Pug and Sass, HTML and CSS preprocessors respectively. They will allow us to write much cleaner and more organized code, and also help with maths.

Animating Elements Along SVG Paths with JavaScript

Animating Elements Along SVG Paths with JavaScript

Path slider is a animating elements along SVG paths with javascript.

confettiKit : JavaScript Random Confetti Effects & Explosions

confettiKit : JavaScript Random Confetti Effects & Explosions

ConfettiKit.js can easily generate random confetti Effects and Explosion with javascript. Easy to Use with html and javascript. Can Create random confetti effects like Happy birthday , celebrations and many more. you can change colors, angle ,rotation of confetti and many more configuration for creating confetti effects.

Features:

  • Custom Colors
  • Custom Elements like image,text,svg
  • Custom Configuration
  • Light weight

Woah.css : CSS Animation Library for eccentrics

Woah.css : CSS Animation Library for eccentrics

Woah.css is a css animation library for eccentric web developers.Woah.css has three different types of animations to choose from.

  • Woah animations — These are very eccentric and barely practical, but are very fun and showy.
  • Wow animations — These are still a little eccentric, but could very well be used in normal websites.
  • Normie animations — These are very basic.