ScrollTrigger and smooth-scrollbar jumps to first slide

[virtualvinay]

Hi,

There seems to be an issue with my scrolltrigger or timelines, the moment i stop scrolling the page and i am in the middle of the slide, it jumps to the first slide. Quite weird as this doesn't happen in example is saw on codepen : 

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

 

As i see the difference in the example, is the scrolltrigger is being called in the tweens (to/from) whereas in mine i am putting it in the timeline and the tweens are kept separate as i have multiple animations in each of my slides.

 

Can anyone help me figure out whats going wrong with my code.

 

Thanks in advance.

 

See the Pen WNjgMNW by vinayvasu (@vinayvasu) on CodePen

[akapowl]

Hello there.

 

Looks like the problem is, that you are setting a snap in your defaults but are not defining where to snap to.

I just added a snapTo: [0] and it already doesn't jump to the top of the page anymore for me.

 

So you'd have to declare some logic for when to snap. The way you have it though, snapping won't happen when any of the ScrollTriggers you defined is not active - so if you want snapping to happen all along the page, maybe set a ScrollTrigger that spans across the whole scroll distance of the page and declare some logic for the snapping only for that ScrollTrigger instead for each individual ScrollTrigger.

 

On a different note:

If I am not mistaken, start: 'top' and end: 'bottom' in your defaults are no valid values.

If you are not going to put in an exact scroll-value for the start/end you would have to declare two parameters for each - the first referring to your trigger-element and the second referring to the viewport - e.g. start: 'top top', which also is the default for pinning ScrollTriggers. Or use a relative value for the end e.g. end: "+=100%".

 

See the Pen fde7e7f0f3d99629e479624af573ca7d by akapowl (@akapowl) on CodePen

[virtualvinay]

Thank you @akapowl that worked, since i have many animations in each slides, i would need to give snap as a an array. Which i did and it worked.

Thank you very much again.