Jump to content
GreenSock

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

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

Untitled.png

Untitled=2.png

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?

Untitled-1.jpg

Link to comment
Share on other sites

Hi quochmin!

 

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

 

Quote
  • 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.
×