Best jQuery Animation Plugins & Tutorials with Demo

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.

Parallax Color Bars with JavaScript

Parallax Color Bars with JavaScript

Amazing animated color bars parallax effect on black & white image while page scrolling.In parallaxColorBars you can now add settings using the data-parallax-color-bar attribute. You still need to call $(element).parallaxColorBars() to initialize parallaxColorBars on the element.

LayerJS: Javascript UI Composition Framework

LayerJS: Javascript UI Composition Framework

layerJS is an open source Javascript UI/UX library allowing intuitive, visually intense, mobile app-like experiences for web apps and websites.

layerJS follows the idea that any kind of interactive web content is composed of media elements on moving layers. Unlike existing UI frameworks, layerJS does not provide various UI elements (use your favorite framework for that) but focusses on how larger blocks are put together to form websites and apps and how these blocks will behave upon user interaction.

UX patterns like menus, sliders, layers & lightboxes, parallax effects, page-swipes, zoom effects, etc. are really justinteractive animated layers. layerJS is a simple open source library that provides one simple universal concept to create such patterns in pure HTML.

Curtains.js : Animated WebGL Textured Planes JavaScript library

Curtains.js : Animated WebGL Textured Planes JavaScript library

Curtains.js is a lightweight vanilla WebGL javascript library that turns HTML elements into interactive textured planes, allowing you to animate them via shaders.
You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.

Ideas for Proximity Feedback with Progressive Hover Effects

Ideas for Proximity Feedback with Progressive Hover Effects

Today we’d like to share some subtle proximity feedback ideas with you. We’re exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it. There are several interesting use cases for this kind of effect and today we wanted to showcase some of them.

Motion CSS : A library of CSS3 Animation

Motion CSS : A library of CSS3 Animation

Motion CSS is a library of animation for your web projects. It works very simply. All you need to do is connect the css file and use a specific class to an element that should be animated.

Particle Effects for Buttons with Anime.js

Particle Effects for Buttons with Anime.js

Today we’d like to share a little effect library with you that can be used to create bursting particle effects. The idea is to desintegrate an element into particles and making it disappear (and vice versa). This effect looks really interesting on buttons, so we’ve created a little collection that showcases a bunch of different styles for the effect.