Best jQuery Animation Plugins & Tutorials with Demo

On-Scroll Morphing Background Shapes with SVG

On-Scroll Morphing Background Shapes with SVG

Today we’d like to share a little background effect with you. The idea is to animate a decorative SVG shape on scroll. The shape is morphing into different forms depending on the section we are currently viewing. The animations are powered by Julian Garnier’s anime.js and the scroll detection is supported by Stu Kabakoff’s scrollMonitor.js.

Folder Preview Ideas with CSS

Folder Preview Ideas with CSS

oday we’d like to share some fun little hover effects with you. The idea is to show a preview animation for folders. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder. We are using anime.js to power the animations.

Ramjet : Animated Morph DOM Elements

Ramjet : Animated Morph DOM Elements

Morph DOM elements from one state to another with smooth animations and transitions.

Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we’re transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we’re transitioning from) has exactly the same position and dimensions as the second element originally did.

STIMED.js : jQuery plugin for controlling CSS styles over Time

STIMED.js : jQuery plugin for controlling CSS styles over Time

STIMED.js is a jQuery plugin for controlling CSS styles over time. There are almost endless possibilities for using timed CSS properties. You could change webpage colors to make them more calm at night and more contrast during daytime, or hide a specific element in a certain time, or just move an element in sync with time…

AnimateMate : Create your animations directly in Sketch

AnimateMate : Create your animations directly in Sketch

Create your animations directly in Sketch using AnimateMate.

WebGL Scroll Spiral

WebGL Scroll Spiral

Today we want to show you some shader art made with WebGL. The idea is to create a decorative background effect by twisting images and hexagonal grid patterns smoothly on page scroll. The effect aims to be as light as possible on desktops or mobile devices.

Developer/Designer Page Layout Concept with JavaScript

Developer/Designer Page Layout Concept with JavaScript

Today we’d like to share a simple page layout concept with you. The theme of the page is a developer/designer portfolio where we add a special effect for revealing the “other” quality of the designer. When you open the demo, you’ll notice a kind of “glitch” effect on some words and also on the portrait. The glitch reveals the “coder side”. When clicking on the “coder” switch in the lower left corner, the image will be taken apart and animated with little rectangles, revealing another image behind. At this point everything will switch to the developer (or coder) view.

Grid Loading Animations with JavaScript & CSS

Grid Loading Animations with JavaScript & CSS

Today we’d like to share a set of simple, inspirational loading animations for grid items with you. The idea is to show some image grid items with a (subtle) animation after loading has finished. For the demo we have three slightly different grid layouts with different gutters and column numbers.

Animated Wobble Window jQuery plugin

Animated Wobble Window jQuery plugin

Wobble window is a lightweight jQuery plugin that applies a wobble effect to your HTML elements backgrounds.

jQuery SVG Progress Plugin

jQuery SVG Progress Plugin

This is a unique and one-of-a-kind jQuery plugin that allows you to display infographics on your web resource. Its main feature is a large variety of figures to be precise then six.

Dimensions of each figure are formed based on the size of the block to which jQuery-svg-progress was applied, which gives great flexibility in use. Accordingly, the size of the contour of figs perfectly adapts when loaded on mobile devices.



Best jQuery websites design awards