An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles. Anime.js is used for the animations.
Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, shape morphing and transform used.
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
The animations are powered by anime.js
Clipped SVG Slider is a simple slider, with morphing preview images animated using SVG properties.
Segment is a little JavaScript class to draw and animate SVG path strokes.
jQuery DrawSVG is lightweight, simple to use jQuery plugin to animate SVG paths.
This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.
A simple, responsive carousel with animated SVG paths used as transition effects.
A tutorial about creating full page slider, with animated SVG elements used as transition effects.
Animate Plus is a performant JavaScript library that helps you animate CSS properties and SVG attributes. Animate Plus is well-suited for quick UI interactions as well as longer animation sequences on both desktop and mobile.
svgPathAnimation is a jQuery function for animating SVG multiple path synchronously.
Vivus is a little JavaScript class to make drawing animation with SVGs in a webpage. Different animations are available, even scripting the entire SVG to do whatever you want.
Walkway.js a javascript library to animate SVG images consisting of line and path elements in an easy way.
