Jump to content
Search Community

Different values of pageYOffset onLeave in ScrollTrigger

Roman Baranov test
Moderator Tag

Recommended Posts

Hello everyone, as always I'm happy and grateful to use GSAP.

I'm trying to calculate position for switching position from fixed to absolute and back again, and I have different values every time, why it's happening? And can I change something to avoid this? I'm logging this values, for better understanding -  open codepen in new tab with console open

Also, how can I add more pining for last section? I need to add scrub animation.

See the Pen RwpQMYK by baranovroman (@baranovroman) on CodePen

Link to comment
Share on other sites

46 minutes ago, Roman Baranov said:

I have different values every time, why it's happening?

Because the browser doesn't scroll in exactly 1px increments. For example, the ScrollTrigger's end position may be at 500 and the user is at 498 and then scrolls really fast so that on the next update the scroll position is actually at 515. On that update/refresh of the screen of course ScrollTrigger will fire its onLeave (as it should). It's not a bug - it's just that you shouldn't write your code assuming that when a callback is fired, it will be EXACTLY that end scroll position. 

 

If you have logic that requires that end position, you could certainly reference self.end if you'd like. 

 

49 minutes ago, Roman Baranov said:

Also, how can I add more pining for last section? I need to add scrub animation.

I don't understand your question. Can you elaborate please? Are you saying you want it pin it for a longer span, making the whole page longer or something? And are you asking how to turn on the scrub feature? 

Link to comment
Share on other sites

2 hours ago, GreenSock said:

Because the browser doesn't scroll in exactly 1px increments. For example, the ScrollTrigger's end position may be at 500 and the user is at 498 and then scrolls really fast so that on the next update the scroll position is actually at 515. On that update/refresh of the screen of course ScrollTrigger will fire its onLeave (as it should). It's not a bug - it's just that you shouldn't write your code assuming that when a callback is fired, it will be EXACTLY that end scroll position. 

 

If you have logic that requires that end position, you could certainly reference self.end if you'd like. 

 

I don't understand your question. Can you elaborate please? Are you saying you want it pin it for a longer span, making the whole page longer or something? And are you asking how to turn on the scrub feature? 

Thank you very much, self.end it's exactly what I need, but I still have some trouble, I want to check element.getBoundingClientRect().top onLeave callback, which calculated different every time, can I imagine something with this?

About second part of question, I will try, if it does not work, then I will reformulate the question.

 

Maybe I can get offset between scroll position and self.end, and calculate inaccuracy, and use it for boundingClientRect?

Link to comment
Share on other sites

12 hours ago, Roman Baranov said:

I still have some trouble, I want to check element.getBoundingClientRect().top onLeave callback, which calculated different every time, can I imagine something with this?

Like @Cassie, I'm kinda lost too. But keep in mind that getBoundingClientRect() is based on the viewport not the page, thus the scroll position will always affect it. In other words, if you getBoundingClientRect() and then you scroll 100px and getBoundingClientRect() again, it'll be 100px different this time. 

 

Good luck!

Link to comment
Share on other sites

16 hours ago, Cassie said:

I'm sorry pal, I'm not following this.

 

what is it you're trying to achieve with these values?

I want set position fixed on SVG when sections scrolling horizontally, and set it absolute every time, when section scrolling vertically.

 

onEnter horizontally I calculate position of absolute element and set it for fixed

 

onLeaveBack horizontally I set position absolute, and get initial value of top position

 

onEnterBack horizontally  I set it to fixed and calculate position

 

for all onEnter and onEnterBack I get inaccuracy between self.end/start and pageYOffset and I get values that I need, it's work good

but onLeave I got wrong values everytime I have inaccuracy in one value depends on viewport width

 

I'm bad in english and in explaining my thoughts even in native language, I'm update codepen and hope it's better for understand my problem, SVG jump onLeave horizontal scroll

See the Pen RwpQMYK by baranovroman (@baranovroman) on CodePen

Link to comment
Share on other sites

5 hours ago, Roman Baranov said:

I'm bad in english and in explaining my thoughts even in native language, I'm update codepen and hope it's better for understand my problem, SVG jump onLeave horizontal scroll

You did a great job! I get what you're trying to do.

Explaining what you're trying to achieve is often easier than trying to ask for help with your solution because people can recommend other approaches then!

 

I think the way you're approaching this is overcomplicating things.

 

This won't be the exact effect you're looking for -the values will need tweaking, but I reckon setting the SVG to postion fixed and then animating the line within that SVG to where you need it to be is going to be a lot less buggy than trying to calculate heights and distances and layout.

Here - something like this

See the Pen 33ac44872b305b2c8e5047af6a138785?editors=0110 by cassie-codes (@cassie-codes) on CodePen

  • Like 2
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.
×
×
  • Create New...