Jump to content
Search Community

Detect when there is no scroll - ScrollTrigger

Pata test
Moderator Tag

Recommended Posts

I am trying to do this effect:


 the circle stretches when I scroll down
  the circle narrows when I scroll up
⁉️ and finally I want the circle to return to its initial position when there is no scroll


Sure it's easy but I can't figure out how to do that.


Also, I'd like to know if it's possible to give a delay effect at the beginning of the animation. Some kind of inertia.


Any help will be welcome.


Thanks in advance,


See the Pen XWXxamd by collserola (@collserola) on CodePen

Link to comment
Share on other sites

Hey Pata. I am not understanding exactly what you mean by the delay/inertia at the start. You could use an actual delay value on your tweens. Or change the ease.


There are lots of ways you could set it up depending on the exact effect that you're wanting. Here's one way:

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

  • Thanks 1
Link to comment
Share on other sites

I would like to know how to start an animation when scrolling down, to play another animation when scrolling up and especially how to run a different animation when I'm not scrolling.


The truth is that you got the idea of the inertia but having the animation tied to the scroll speed makes it look weird.


BTW thanks a lot for the proposal. I would appreciate an answer to the first question.



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.
  • Create New...