AdamT

@OSUblake Thank you again for your response. This example is exactly what I was looking for. Using the attached demo, I could make my ScrollToPlugin go exactly where I wanted.

@OSUblake Thank you for the quick answer. This solves one of my issues, but the ScrollToPlugin error still remains. If you click on the top left "Screen 3" link you can see the viewport only goes down to the first or second screen. You have to click the link a second time to reach the intended screen. I think I read that ScrollToPlugin shouldn't have any issues when using ScrollTrigger so I guess it's my code that breaks it. Do you have any suggestions why this is happening?

Hello, I'm working on a scroll-based reveal animation using ScrollTrigger, but I have trouble finding the right solution. I created a minimal demo that actually works (with minor issues) and looks the way I want. The problem is that I think my solution is a little bit hacky, and probably there's a better way of doing this. The most obvious clue for me is the 'Screen 3' link at the top left corner. I'm using the ScrollToPlugin to scroll down to an id inside the 3rd screen, but it must be clicked multiple times to reach the actual id when you start at the top. Can you help me with some tips or examples so I can achieve the exact same effect with a better working solution? I read that I shouldn't add default CSS transform properties when working with xPercent animations, but this way sometimes the page loads in with the 'Screen 1' section visible. A negative X transformation on the #content selector would solve this issue, but I can't use that because that would break the GSAP animation. What's the best solution to avoid this behavior? Thanks in advance! Adam P.S. I'm not sure why the snap animation is jumping around and moving backward. I have the same code in my project, and it only happens on CodePen.