jQuery Plugin Directory

Morphing Page Transition with CSS & SVG

Morphing Page Transition with CSS & SVG

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use Charming. In the demos we use an “intro transition” in order to showcase the effect, but that’s of course only one of the many use cases for this kind of page transition.

animation
css3
SVG Tutorial
CSS2
0

Organic Shape Animations with SVG clipPath

Organic Shape Animations with SVG clipPath

Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.

animation
SVG Tutorial

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.

animation
Core Java Script
SVG Tutorial

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.

animation
Core Java Script
SVG Tutorial

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.

animation
Core Java Script
SVG Tutorial

jQuery Plugin For SVG Blur Effects On Image : jqImgBlurEffects

jQuery Plugin For SVG Blur Effects On Image : jqImgBlurEffects

This plugin was created on the concept un-blurring a part of image using SVG.

Image Effects
SVG Tutorial

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.

animation
SVG Tutorial

zPath.js : jQuery plugin to Animate SVG Path

zPath.js : jQuery plugin to Animate SVG Path

A simple and easy to use plugin to draw any simple svg that uses only paths or any other elements but without fills.

animation
SVG Tutorial

Surf Report Template with SVG & CSS Flexbox

Surf Report Template with SVG & CSS Flexbox

A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experimental.

css3
SVG Tutorial
CSS2
0

Fancy SVG Letter Animation

Fancy SVG Letter Animation

Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.

animation
SVG Tutorial
Text Effect