Best jQuery Animation Plugins & Tutorials with Demo

    flubber : Tools for Smoother Shape Animations

    flubber : Tools for Smoother Shape Animations

    flubber is a tools for Smoother Shape Animations.Some best-guess methods for smoothly interpolating between 2-D shapes.

    Letter Effects and Interaction Ideas with CSS

    Letter Effects and Interaction Ideas with CSS

    Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters. We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.

    Warp drive : jQuery HTML5 canvas based Starfield effect.

    Warp drive : jQuery HTML5 canvas based Starfield effect

    Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

    Playful Little Tooltip Ideas with SVG & JavaScript

    Playful Little Tooltip Ideas with SVG & JavaScript

    Today we’d like to share a couple of simple tooltip animation ideas with you. The tooltips have different shapes mostly made of SVGs and we are animating them with anime.js. Some of these bouncy fellas use SVG path morphing, others transforms and one is a simple text effect.

    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.