How to Animate SVG Shapes on Scroll
by Mary Lou
A short tutorial on how to animate SVG paths while smooth scrolling a page.
+ more#morphing
Morphing Gooey Text Hover Effect
by Mary Lou
Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.
+ more
Animated SVG Frame Slideshow
by Mary Lou
An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.
+ more
Organic SVG Shape Morph Ideas
by Mary Lou
A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content
+ more
Morphing Page Transition
by Mary Lou
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.
+ more
Organic Shape Animations with SVG clipPath
by Mary Lou
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.
+ more
Playful Little Tooltip Ideas
by Mary Lou
Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform.
+ more
On-Scroll Morphing Background Shapes
by Mary Lou
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
+ more
Item Reveal Animations with SVG
by Mary Lou
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
+ more
Shazam-Like Morphing Button Effect
by Mary Lou
A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.
+ more
Some Ideas for Checkout Effects
by Mary Lou
Some fun effect and layout ideas for the first step of a checkout process in an online store. We are using the morphing buttons concept together with CSS transforms
+ more
Elastic SVG Elements
by Mary Lou
Some inspiration for elastic components with SVG shape animations for enhanced UI interactions.
+ more
Simple Morphing Search
by Mary Lou
A simple effect idea for a search input that morphs into a fullscreen overlay. The idea is to enlarge the search input and show some relevant content or search resul
+ more
Morphing Buttons Concept
by Mary Lou
Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fulls
+ more
Morphing Devices
by Mary Lou
An experimental morphing devices slideshow with CSS Transitions for showcasing responsive web design screenshots.
+ more