GSAP Disintegration Effect On Scroll

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. We’ll learn how to: ✨ Use GSAP ScrollTrigger and html2canvas to break an image into animated fragments ✨ Configure the effect using HTML attributes (like rotation, offset, animation start/end) ✨ Apply it to dynamic content using Webflow CMS ✨ Preserve accessibility with alt text ✨ Combine the effect with native Webflow animations ✨ Use best practices to optimize performance and avoid layout issues ✨ Make the effect responsive across breakpoints 👉 Watch on YouTube: https://youtu.be/ScY8hLVPk7s 👉 GSAP Knowledge Base: https://francescocastronuovo.com/kb/gsap-webflow/