From SplitText to MorphSVG: 5 Creative Demos Using Free GSAP Plugins
GSAP’s premium plugins are now free, and this article explores their creative potential through five playful animation demos.
18 posts tagged with
Creating the Morphing Effect of the Luma Dream Machine Website
In Tutorials, by Jean Mazouni
Learn how to create this powerful morphing effect with only JavaScript using the Canvas2D API.
On-Scroll Shape Morph Animations
In Playground, by Manoela Ilic
Scroll-driven shape morph animations with tilt interaction inspired by the effect seen on KPR.
How to Animate SVG Shapes on Scroll
In Tutorials, by Manoela Ilic
A short tutorial on how to animate SVG paths while smooth scrolling a page.
Morphing Gooey Text Hover Effect
In Playground, by Manoela Ilic
Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.
Animated SVG Frame Slideshow
In Playground, by Manoela Ilic
An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.
Organic SVG Shape Morph Ideas
In Playground, by Manoela Ilic
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 reveal effect.
Morphing Page Transition
In Playground, by Manoela Ilic
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.
Organic Shape Animations with SVG clipPath
In Playground, by Manoela Ilic
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.
Playful Little Tooltip Ideas
In Playground, by Manoela Ilic
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.
On-Scroll Morphing Background Shapes
In Playground, by Manoela Ilic
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
Item Reveal Animations with SVG
In Playground, by Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
Shazam-Like Morphing Button Effect
In Tutorials, by Manoela Ilic
A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.
Some Ideas for Checkout Effects
In Playground, by Manoela Ilic
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 and transitions.
Elastic SVG Elements
In Playground, by Manoela Ilic
Some inspiration for elastic components with SVG shape animations for enhanced UI interactions.
Simple Morphing Search
In Playground, by Manoela Ilic
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 results.
Morphing Buttons Concept
In Playground, by Manoela Ilic
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. fullscreen overlay, modal window, sidebar and more.
Morphing Devices
In Playground, by Manoela Ilic
An experimental morphing devices slideshow with CSS Transitions for showcasing responsive web design screenshots.
