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:
try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): 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 :).
5 мар 2024
