Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Next section when scrolling

Recommended Posts

Sorry quocminh, not sure how to help here, could you rephrase this as a question. Thanks!

Link to comment
Share on other sites

I want when I do the scrolling here, just one scrolling will change the animation from 1 to 2



Link to comment
Share on other sites

So you want to apply snapping to the ScrollTrigger? You could add a label at the end of each section (animation) and then use snap: "labels" or "labelsDirectional" like this: 

See the Pen GREdeXe?editors=0010 by GreenSock (@GreenSock) on CodePen


Does that help? 

Link to comment
Share on other sites

Yes, that's exactly what I wanted. But it doesn't look very smooth. Can you help me make it faster?


Link to comment
Share on other sites

Hi quochmin!


You can custom the snap behavior using an object. Please refer to the documentation.


  • Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required):
    • snapTo [Number | Array | Function | "labels"] - determines the snapping logic (described above)
    • delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number)
    • duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point.
    • ease [String | Function] - the ease that the snapping animation should use. The default is "power3".
    • inertia [Boolean] - to tell ScrollTrigger not to factor in the inertia, set inertia: false
    • onStart [Function] - a function that should be called when snapping starts
    • onInterrupt [Function] - a function that should be called when snapping gets interrupted (like if the user starts scrolling mid-snap)
    • onComplete [Function] - a function that should be called when snapping completes


Link to comment
Share on other sites

And for the record, I don't think it's possible to make it 100% "smooth" because in order for snapping to occur, it must sense when scrolling ENDS (so that it can take over the scrollbar) which by definition means waiting at least a short time to make sure the user isn't continuing to scroll. So there will always be a bit of a delay before snapping kicks in. 

Link to comment
Share on other sites

Thank you for your help!
I need to support for more issue:
How do "Section 1" and "Section 2" apply snap scroll. While the scrollTrigger applied content still remains the same

See the Pen bGRMBMm by minhcodefactory (@minhcodefactory) on CodePen

Link to comment
Share on other sites

Sorry, I don't understand your question. 


You're welcome to apply native CSS scroll snapping - that still works since ScrollTrigger doesn't do any scroll-jacking. I'm not saying that addresses your question (because I don't understand what you mean), but I figured I'd mention it in case it helps.

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.