Jump to content
GreenSock

goodcontext

How can I pause while scrolling in ScrollTrigger?

Go to solution Solved by GreenSock,

Recommended Posts

Hello.
I'm going to put in a function that stops while scrolling.
For a moment, I'm going to get the top of the image and the top of the screen exactly right.
Should we use the pause() function of timeline?
Or can it be solved with the function of scrolltrigger?

See the Pen MWQbmwx by goodcontext (@goodcontext) on CodePen

Link to comment
Share on other sites

I read your question a few times but I'm still very confused about what you're asking. You want to pause the animation (but allow scrolling)? Or you want to pause scrolling so that even if the user is trying to drag the scrollbar (or spin their mouse wheel), it won't budge? 

  • Like 1
Link to comment
Share on other sites

It's the latter.
When the user scrolls down, even if they keep scrolling, they want it to stop at a certain point, just a little bit for a second.
Thank you.

Link to comment
Share on other sites

  • Solution

I'm still not sure because your demo has multiple scrollbars. It sounds like maybe you want to do "pinning"? That doesn't actually stop the scrollbar from moving - it simply pins the element for a certain scroll distance. You can read in the docs about the "pin" property of ScrollTrigger. 

 

For the record, as a user I would HATE it if a site literally prevented me from moving the scrollbar or it stopped responding to my mouse wheel. But maybe I'm weird. 

  • Like 1
Link to comment
Share on other sites

It's for your convenience. For example, when you move a window, it sticks to the corner like a magnet.
If you scroll down the image, the image will go up straight, and if you pause for about half a second when the image is in the correct position, it will be much easier for the user to fit the image in the correct position.
I put a carousel in the middle, but if I scroll, it goes a little too far, so I can't see the top.
So that's how I thought about it.

Link to comment
Share on other sites

I was able to solve the problem by watching the video of the pin part in the DOC you told me.
Thank you for your answer.

 

See the Pen VwQmzao by goodcontext (@goodcontext) on CodePen

 

  • Like 1
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.
×