ScrollTrigger - Vertical Horizontal scroll

[mbuccaneer 0 Likes (Newbie)]

Hi,

I'm looking to get a horizontal scroll section that snaps through panels in the middle of a page but as you scroll down the page you end up shooting past the first panel.

Is there a way to control the snap threshold, as in how far you scroll before it kicks on to the next panel? do I need an extra panel at the start to shoot past? snap not a good idea? any other ideas?

 

I'm sure this might have been covered before so if someone can point me in the right direction that would be much appreciated.

See the Pen YzeBgWj by mbuccaneer-the-bold (@mbuccaneer-the-bold) on CodePen

[mvaneijgen 580 Likes (Leader)]

Hi @mbuccaneer welcome to the forum!

 

You can increase scroll distance over which the animation is played. I've set the end trigger to be 10 times as large as before, this way you need to scroll a lot more before a panel moves, but I'm not sure what you are looking for.

 

ScrollTrigger can also animate a timeline, maybe that is something you could look in too. With a timeline you have much more control over the animation and can add some empty tween to the beginning of the timeline that does nothing for X amount of scroll 

 

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

 

Here an example with a timeline that has an empty tween at the start of the timeline 

See the Pen RwMwRXo?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[mbuccaneer 0 Likes (Newbie)]

Thanks for the reply, sounds like looking at an animated timeline will be a more fruitful path!