Issues with ScrollToPlugin when using ScrollTrigger

[AdamT 0 Likes (Newbie)]

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.

See the Pen ZEvJgpR by adamtroll (@adamtroll) on CodePen

[OSUblake 18,474 Likes (Superhero)]

Welcome to the forums @AdamT

 

I haven't really looked at your pen, but you can set transforms in your CSS. The issue is that the browser reports everything in px, so if you have a percentage based one, it might not be correct like say on a resize or something. I would set the transform in your CSS, and then in your JavaScript change it to what they should be.

 

gsap.set(".foo", {
  xPercent: -100,
  x: 0
})

 

[AdamT 0 Likes (Newbie)]

@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?

[OSUblake 18,474 Likes (Superhero)]

Due to pinning, the scroll position of that element changes as the page scrolls. You'd need to calculate where exactly the element is, kind of like how this demo does.

 

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen

 

[AdamT 0 Likes (Newbie)]

@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.