GSAP Disintegration Effect On Scroll

site profile thumbnail
✨ Looking for a way to create a stunning disintegration effect in Webflow — without writing a single line of code? This time, I’ll walk you through a fully customizable, scroll-triggered disintegration effect built with GSAP and html2canvas, and controlled entirely through custom HTML attributes. The best part? You don’t need to touch the JavaScript — just copy the component, set a few attributes, and you’re done ✅ --- 🎯 What you’ll learn in this video: ✨ How to use GSAP ScrollTrigger and html2canvas to break an image into animated fragments ✨ How to configure the effect using HTML attributes (like rotation, offset, animation start/end) ✨ How to apply it to dynamic content using Webflow CMS ✨ How to preserve accessibility with alt text ✨ How to combine the effect with native Webflow animations ✨ Best practices to optimize performance and avoid layout issues ✨ How to make the effect responsive across breakpoints 👉 Watch on YouTube: https://youtu.be/ScY8hLVPk7s