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.
102 posts tagged with
How to Create a Gooey Search Interaction with Framer Motion and React
In Tutorials, by Oguzhan Tufenk
A ready-to-use search bar made with Framer Motion, featuring an interesting gooey effect.
Scroll-based SVG Filter Animations on Text
In Playground, by Manoela Ilic
A small set of scroll-based SVG filter animations on HTML text.
Creating a Glowing Text Marquee Animation
In Tutorials, by Kaploom®Creative House
Learn how to create a glowing SVG text animation with a marquee effect using only HTML and CSS.
On-Scroll SVG Filter Effect
In Playground, by Manoela Ilic
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
Gooey Cursor Effect
In Playground, by Manoela Ilic
A fun gooey cursor background effect with SVG filters and CSS blend modes.
Bringing Letters to Life: Coding a Kinetic SVG Typography Animation
In Tutorials, by Louis Hoebregts
In this tutorial, you’ll learn how to recreate a captivating motion type effect using SVG and GreenSock.
Custom SVG Cursors with an Interactive Emitter Effect
In Playground, by Marlène Bruhat
Several interactive cursor effects made with JavaScript and SVG.
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.
Animate Anything Along an SVG Path
In Tutorials, by Louis Hoebregts
Learn how to code creative animations using SVG paths and the getPointAtLength() function.
SVG Overlay and Infinite Menu Background Animation
In Playground, by Manoela Ilic
A little menu effect with an SVG overlay and an infinite background CSS animation.
Superhero Animation Effect with SVG Filters
In Tutorials, by Abner Nascimento
Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks.
Thumbnail Hover Effect with SVG Filters
In Playground, by Manoela Ilic
A simple thumbnail hover effect with an SVG filter distortion.
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
In Tutorials, by Manoela Ilic
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
Circular SVG Text Animation
In Playground, by Manoela Ilic
Exploring some experimental circular SVG text effects for an intro animation.
Simple CSS Line Hover Animations for Links
In Playground, by Manoela Ilic
A couple of simple & subtle CSS-based line hover animations for links.
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 Custom Cursor Effects
In Playground, by Manoela Ilic
Some ideas for interactive custom cursor animations using SVG filters.
