Detect when there is no scroll - ScrollTrigger

[Pata]

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

[ZachSaucier]

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

[Pata]

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.

 

 

[ZachSaucier]

You could use .delayedCall() to do something like that:

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

[Pata]

I am very grateful. That's exactly what I need.

 

Thanks!