Best jQuery Animation Plugins & Tutorials with Demo

Micron.JS : MicroInteraction library with CSS Animations & JavaScript

Micron.JS : MicroInteraction library with CSS Animations & JavaScript

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript.

Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

Between.js : Lightweight JavaScript (ES6) Tweening library

Between.js : Lightweight JavaScript (ES6) Tweening library

Between.js is a lightweight JavaScript (ES6) tweening library.Make tweening usage convenient and powerful. There are certain things that we were following while developed this library, we wanted to make it:

  • Lightweight – The library is only 8.3 Kb
  • Performant – It uses optimization patterns to speed up & smooth animation.
  • Modern – The library is written in ES6

Slide Out Box Menu with CSS Grid & TweenMax

Slide Out Box Menu with CSS Grid & TweenMax

Today we’d like to share a little menu with you. The idea is to reveal the boxes of a grid individually from the top right corner of the page similar to the Expanding Grid Menu we did a while back. The animations are powered by TweenMax.

jQuery Header Scroll Effect Plugin

jQuery Header Scroll Effect Plugin

The scroll effect header is a kind of parallax whose difference lies in the change, if parallax usually occurs because of the movement of two objects, while this is changing and moving. Obviously if the scroll header will change blur, sepia or other effects follow movement scroll.

Features

  • Valid All HTML5
  • Valid CSS
  • Responsive
  • All Filter Scroll Effect
  • Bonus Effect Margin and Border Radius

Flipping : Flipping Awesome Animations Library

Flipping : Flipping Awesome Animations Library

Flipping is a library and collection of adapters for implementing FLIP transitions.

Demo1 Demo2 Demo3

Motion Reveal Slideshow with CSS & TweenMax Js

Motion Reveal Slideshow with CSS & TweenMax Js

Today we’d like to share another slideshow with you. The idea is to have a bit more of motion when navigating between the slides and showing another preview part with a fullscreen image.The animations are powered by TweenMax.

slowNumber.js : Simplest and fastest way of Animating your Numbers

slowNumber.js : Simplest and fastest way of Animating your Numbers

slowNumber.js is a simplest and fastest way of animating your numbers.You can set how much frames per second your animation will have.Focusing on fps, it doesn’t spend resources unnecessarily changing the numbers.

Animate any number

  • Content
  • SVG properties
  • CSS properties

Canvas Slicer Slider with JavaScript

Canvas Slicer Slider with JavaScript

Canvas Slicer is a unique and easy to use slider with awesome transition effects, which you can also create yourself. Written with pure object oriented javascript. It has easy to implement and configure. This slider will add your page eye-catching effect.

  • 9 unique animation effects or set your effect.
  • Responsive
  • Directional navigation
  • Touch screen support
  • Helpful API functions are provided
  • Developed with pure object oriented javascript
  • Simple clean and valid markup

Rabbit Ear : JavaScript library for designing Origami

Rabbit Ear : JavaScript library for designing Origami

Rabbit Ear is an interesting JavaScript library for designing origami.

Triple Panel Reveal Slideshow with TweenMax

Triple Panel Reveal Slideshow with TweenMax

Today we’d like to show you a little slideshow design with a “triple panel” layout. The infinite slideshow shows a preview of the next and previous slide on both sides of the page. When navigating we use a reveal effect for all three images and animate the titles. The animations are powered by TweenMax.