Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
darrylvos

ScrollTrigger with ScrollTo not jumping to the correct position

Recommended Posts

I have panels for content that use a scroll trigger (scrubbing & Pinning) to reveal. I would like users to be able to click on the nav to jump to one of the content panels.

After leveraging bits from this wonderful forum, I was able to get a working prototype. Only issue I'm having now is that when a user clicks to go to a lower content panel it works. Then when they click on a higher content panel it appears the offset is off by about 50% the window.innerHeight. When I use an OffsetY value (window.innerHeight / 2) the lower content panels show at 50% but the higher panels show correctly.

 

I feel like if I could determine the scroll position of the element I'm scrolling to I could just add the correct offset to compensate.

 

Is there any way to correct this behaviour? 

 

(FYI, It doesn't appear to be showing well in the embeded codepen... Seems to work fine on codepen.io)

See the Pen oNxzEPg by darrylvos (@darrylvos) on CodePen

Link to comment
Share on other sites

Hey darrylvos and welcome to the GreenSock forums. I am able to reproduce the issue in your CodePen if the height is substantial (which is easier in the view where the code is on a side or full page view).

 

This has to do with the scale: 2 in your animation. When you click the button the target's vertical scroll offset is recorded. But when that section is scrolled to, the element shrinks! By the time the end scroll position is reached the element is only a fraction of the size that it was, hence the offset. If you need to retain the scale while keeping this effect, just make sure what you're scaling is not what you're using to get the scroll position :) 

 

Same sort of thing with pinning. It's best to scrollTo elements that aren't being affected by transforms or other offsets related to the scroll position.

You might be able to cut out a container by messing with it but this works:

See the Pen abNmYRB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side notes:

  • I'm not sure what you were trying to do with the ease: "power2t" - maybe you have a CustomEase that you didn't include?
  • That button expand effect is really annoying as a user :D Especially given only the text is clickable right now and the text moves around. 
  • Like 1
Link to comment
Share on other sites

Thanks for the warm welcome. Super impressed with how efficient your team is at answering questions and the level of quality and support you're giving!

 

This totally worked. I thought I had removed the scale and still faced the same issue, but this concept works very well. Thank you for that.

 

On the side notes:

  • ease: "power2t" was suppose to be ease: "power2". Typo on my part! Thanks.
  • The nav is pretty hacked, the entire block will be clickable not just the word... I agree it's pretty annoying currently.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×