Supercharged Sticky Scroll Sections with GSAP ScrollTrigger
Web Bae Web Bae
8.45K subscribers
4,138 views
140

 Published On Mar 6, 2024

Level up your sticky card stack sections by connecting them to Webflow CMS and animating on scroll with GSAP ScrollTrigger! We'll use the powerful Greensock Animation Platform to breathe life into this classic web design.

👯‍♀️ Clone it:
https://try.webflow.com/cloneable-is-...

// FREE resources
✂️ Code Snippet Library: https://code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: https://www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: https://www.webbae.net/roadmap-to-lea...

// Premium content
🤝 Patreon:   / webbae  
🕸️ Advanced Webflow Course (201): https://www.webbae.net/product/webflo...

// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): https://www.creativecodingclub.com/bu...

// Connect
🙋‍♀️ Join the Discord:   / discord  
🐥 Follow Me!   / webisbae  

Notes from Bae:
I explored using GSAP pin with this, but found it wasn't as smooth on mobile. There were some interesting issues in the GSAP forum around doing this with 100vh vs. 100dvh. Normally for mobile fullscreen layouts I would choose dvh but ScrollTrigger recalculates when the viewport changes, which causes a jump in the animation when scroll direction is reversed. Since pin had a blip of jank anyways on mobile I decide to ditch it for the sticky top: 0 approach :).

show more

Share/Embed