Best jQuery Animation Plugins & Tutorials with Demo

    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.

    Full Image Reveal Effect with TweenMax Animation

    Full Image Reveal Effect with TweenMax Animation

    Today we’d like to share a simple fullscreen image reveal effect with you. The idea is to have an inital thumbnails layout at the bottom of the page and then animate the items when we click them. A covering element comes sliding in and when it moves out, the fullscreen image view is shown behind. We are using TweenMax for the animations.

    liike.js : Tiny JavaScript Tweening Library

    liike.js : Tiny JavaScript Tweening Library

    Liike is a Finnish word and means movementmotion. It’s a minimalistic library to create performant custom JS tweens no matter what you’re tweening.

    When you create a tween, Liike will create a single render loop on-demand for every tweens running and use DOMHighResTimeStamp (provided by requestAnimationFrame), which should be accurate to 5 µs. If the delay is 0, Liike will start the tween at the next animation frame and count the duration from there.

    Motus : Scrolling Animation Library

    Motus : Scrolling Animation Library

    Motus is a animation library that mimics CSS keyframes when scrolling.

    Collapsing Logo Effect with JavaScript

    Collapsing Logo Effect with JavaScript

    Today we’d like to share a little collapsing logo effect with you. The idea is to have an initial view that scales down to a logo in the top left corner of the page. The logo can then be clicked again to expand it to the initial view. The effect is a recreation of the one seen on PracticalVR.