GSAP ScrollTrigger with Horizontal Scroll Section
Hey everyone π
I have a section that I'm using GSAP on to animate a horizontal scroll for. The horizontal scroll is working perfectly however I also need to animate a sort of menu that is at the top of the section to fill the background color as each new scroll item comes into view. Ideally I'd like to be able to target each section with an attribute. I can't seem to get it working.. If anyone has time and wants to help it would be greatly appreciated.
Staging: https://safetraces-1.webflow.io/process
Read Only: https://preview.webflow.com/preview/safetraces-1?utm_medium=preview_link&utm_source=designer&utm_content=safetraces-1&preview=d21b27cfe3dd321e9ee04eb968209eaa&pageId=6476824cc6c2c464615bc4e3&workflow=preview
5 Replies
Hey Blair I don't have time to work this one unfortunately but you're on the right path with gsap timelines. You might explore using trigger divs. Corey Moen has a scroll swap cloneable that uses them.
https://webflow.com/made-in-webflow/website/sticky-scroll-feature-section
Sticky Scroll Feature Section
Sticky Scroll Feature Section - Webflow
A sticky scrolling component that uses interactions to highlight a few features while you scroll past. It also allows the user to click any of the titles to anchor scroll and to that specific feature.
I'll see if I can't have a look later though
Corey's is all webflow but you could use the HTML/CSS structure and then write you GSAP on top of that.
Sweet I'll check this out! Thanks man! Awesome stream with EdgarAllen btw π€
Both Us @blair8319 !!
Haven't been able to figure out unfortunately.. I'm still a noob with GSAP haha