Durostorum

As you said, currently the page follows it's natural scrolling, that is because I've failed at implementing gsap's ScrollTrigger functionality. const tl = useRef( gsap.timeline({ defaults: { ease: "none" }, }) ); useEffect(() => { tl.current.to(linkRef.current, { scrollTrigger: { trigger: containerRef.current, horizontal: true, start: "left right", end: "left left", }, }); }, []); That was my latest attempt, but it doesn't change anything.

Hi everybody, it took me few days, but I followed the advice given earlier. While they helped I got many more questions. So I did start everything from scratch and ended up having a compromised version of what I wanted. The pen includes horizontal parallax ScrollTo functionality. But I couldn't make that work with vertical ScrollTrigger. It does what it's supposed to do, but you have to scroll horizontally. I tried creating timeline reference for React but it wasn't applying the ScrollTrigger, so the scroll stayed horizontal. Also if I'd have to set a secondary animation for each panel once slide#3 enters the viewport should I make a timeline reference and then chain 3 animations and would that be connected to the ScrollTo animation? Or what would be the correct approach there? https://codesandbox.io/s/summer-fog-1olq6?file=/src/App.js Any and all help is welcome.

Hi Zach and thank you for the reply. I saw Petr's short tutorial. A full course is still not available I believe. I did try to use refs, but it ref.current was returning the last instance of the reference. What threw me off was that even without refs both of the methods were working fine, before putting them together in the same file(did separate identical testing first). Your comment gave me direction and I'm going to try it again with better effort. Exactly what I needed. Though I should grab a Snickers first

It's a copy of one of your community examples. However I've tried to add a ScrollTo functionality. In development both of the implementations work, when I comment one of them out and if I have both of them ScrollTrigger takes precedent and the sections cannot be navigated through click. So what could be causing that and what should I do to fix it. https://codesandbox.io/s/summer-fog-1olq6 Codesandbox is being difficult and doesn't even run the ScrollTo function.