Best jQuery Animation Plugins & Tutorials with Demo

    Exploding 3D Objects with Three.js

    Exploding 3D Objects with Three.js

    Today we’d like to share an exploding object experiment with you. A set of WebGL demos that show an exploding 3D object animation inspired by “Kubrick Life Website: 3D Motion”.

    Creative View Mode Switch Animation with CSS & jQuery

    Creative View Mode Switch Animation with CSS & jQuery

    A creative views switch animation with grid and list viewing modes made with CSS3, jQuery, Masonry and GSAP’s TweenMax.

    Create Smooth WebGL Transitions on Scroll using Phenomenon

    Create Smooth WebGL Transitions on Scroll using Phenomenon

    A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.

    Brilliant Animated Testimonials Page with JavaScript

    Brilliant Animated Testimonials Page with JavaScript

    An animated testimonials page made with GSAP’s TweenMax which will help you to impress your customers.

    lax.js : JavaScript Plugin for awesum Scroll Effects

    lax.js : JavaScript Plugin for awesum Scroll Effects

    Lax.js  is a simple & light weight (2kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

    Microsite Concept with Rotating Background

    Microsite Concept with Rotating Background

    An animated microsite concept with rotating background made with CSS3, jQuery and GSAP’s TweenMax. A microsite is an individual web page or small cluster of web pages that act as a separate entity for a brand. A microsite typically lives on its own domain, but some exist as a subdomain. Companies have different reasons for investing in microsites. Microsites have the advantage of opening wide out-of-the-box thinking and strategy and can be used to help brands achieve a number of things. For example, some companies have used them to highlight a specific campaign or target specific buyer personas. Others have used them to tell a short story or to inspire a specific call-to-action.

    Text Trail Effect with CSS & TweenMax

    Text Trail Effect with CSS & TweenMax

    Today we’d like to share a little text effect for a slideshow with you. It’s based on the animation seen in the Dribbble shot Abstract is hiring. The idea is to show a trail of a text when transitioning between slides of a slideshow. The animations are made using TweenMax.

    Grid Reveal Effects with Anime.js

    Grid Reveal Effects with Anime.js

    Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.

    Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.

    Text Distortion Effects using Blotter.js

    Text Distortion Effects using Blotter.js

    Distortion effects have become quite popular over the past two years and now many extraordinary website designs have some unique form of this intriguing trend. Today we’d like to share two demos with you that show how to use Blotter, a three.js and Underscore.js powered API for drawing artsy text effects. We used it to distort text on scroll and on mouse move.

    Custom Cursor Effects with Paper.js

    Custom Cursor Effects with Paper.js

    A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.In the following tutorial we’ll take a look at how to create a magnetic noisy circle cursor for navigation elements. We’ll be using Paper.js with Simplex Noise.