Scroll to Menu option overshooting on Click

[rusticblonde]

Hi,

 

I am working on a stackable card (similar to SwagApp), and everything is working as intended bar the on click function to scroll to the section. Sometimes it is "overshooting" the section, and sometimes its not even scrolling to the top of the section.

 

I have a codepen here

 

 

Honestly,  feels like I have looked at this forever, and would appreciate the guidance on how best to resolve this. (Note testing this within the forum post, doesn't look so bad, but on full screen it is awful XD) 

TY 

See the Pen bGOXMXX by rusticblonde (@rusticblonde) on CodePen

[mvaneijgen]

Your snapping values and the points you scroll to don't seem to over lap. You snap to "labels", so I would also scroll to the same labels in  the timeline. That way your snapping doesn't suddenly take over when you try to scrollTo.

 

I couldn't figure out what and where your labels are and how they should work, but the bellow setup is how I would navigate to certain sections, if you also want to use snap. Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

See the Pen oNJKJmp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[rusticblonde]

15 minutes ago, mvaneijgen said:

Your snapping values and the points you scroll to don't seem to over lap. You snap to "labels", so I would also scroll to the same labels in  the timeline. That way your snapping doesn't suddenly take over when you try to scrollTo.

 

I couldn't figure out what and where your labels are and how they should work, but the bellow setup is how I would navigate to certain sections, if you also want to use snap. Hope it helps and happy tweening! 

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

 

 

Hey, and thanks for responding. I was just actioning like an onclick scroll to div (which is an ID) located at the top of the div. If you look at this in full mode, this doesnt happen all the time, for example I clicked the 3rd option and it worked fine. Clicked then between the 2nd and 3rd, and one overshot.

Is there any examples that you can point out that uses a scroll to label example?

 

Thanks ❤️

[rusticblonde]

Hi @mvaneijgen

See the Pen ZEVgweK by rusticblonde (@rusticblonde) on CodePen

Think i managed to get it to snap to the label + 10px to ensure it was definitely on the label to show the active menu. I also added and set the first timeline label also which appears to be now working (I am very new to this so apologies if this is a little messy).

 

Thankyou for you help!

[rusticblonde]

HI @Rodrigo, hope you are well.

 

See the Pen ZEVgweK by rusticblonde (@rusticblonde) on CodePen

 

I wondered if i could have the smallest bit of help. The last link scroll? Is literally out by maybe 2 px??? Any ideas how i can resolve this :D. Its literally not snapping i feel to the labels. It's like its overshooting on the way back up past the labels, then coming back on itself, which is obviously effecting the animation issue on the menu :S