Jump to content


ScrollTrigger - Vertical Horizontal scroll

Recommended Posts


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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

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.