We assume that by now you’ve all read the wonderful news about GSAP now becoming 100% free, for everyone. Thanks to Webflow’s support, all of the previously paid plugins in GSAP are now accessible to everyone. That’s why today, Osmo, Codrops and GSAP are teaming up to bring you 5 demos, available both as a Webflow cloneable and CodePen. We hope these will provide a fun intro to some cool plugins and spark a few ideas!

What you’ll learn:

• SplitText basics: Break text into lines, words, or letters—with the new automatic resizing and built-in masking options!
• DrawSVG scribbles: Add a playful, randomized underline to links (or anything) on hover using DrawSVG.
• Physics2D text smash: Combine SplitText + Physics2D so your headline shatters into letters that tumble off the top of the viewport like a roof.
• Inertia dot grid: Create an interactive, glowing dot matrix that springs and flows with your cursor for a dynamic background effect.
• MorphSVG toggle: Build a seamless play/pause button that morphs one SVG into another in a single tween.

Before we dive in, let’s make sure you have the GSAP core included in your project. I will let you know the exact plugins you need per demo! You can use the official GSAP Install Helper if you need the correct npm commands or CDN links. If you’re following this as a Webflow user and you want to build from scratch, Webflow has made it super easy to integrate GSAP into your project. If you want, you can read more here. When using this approach, just make sure to add your custom code somewhere in the before </body> section of the page or project settings.

Perfect, with that set, let’s start building an interactive SplitText demo!

Les animations liées au scroll (ou scroll-driven animations) constituent une nouvelle fonctionnalité CSS permettant de synchroniser des animations avec le défilement d'une page ou d'un conteneur. Cette solution native vient remplacer efficacement les scripts JavaScript habituels, avec une meilleure performance et une implémentation simplifiée de manière générale.

Animate picture with AI

You can now create next generation interaction, motion and 3D online or offline!

Whether you're a seasoned developer or a creative with little to no coding experience.
Create interaction, motion and 3D content with our new open-source, offline version that puts the full power of cables in your hands.

cables-gl/cables cables is a tool for creating beautiful interactive content

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.

https://github.com/eludadev/css-buttons