scrollTrigger: why runs immediately and

[KDetected]

Hi, guys, many thanks for the such amazing tool!

 

I'm trying to figure out how to work with gsap ScrollTrigger, and couldn't find an answer for couple things:

 

1. When I'm using scrollTrigger and set duration to zero (0), the animation runs immediately when the page loads. However, if I change duration to any positive value (1), it works as expected. Why's that happening? I can set duration to 0.0001 for example, which works well, but I want to understand

demo: 

(On the demo, the square should be green and half-transparent from the initial)

 

2. On the second demo, the animation plays well for the first time, however if I scroll bottom and back, next changes happens immediately with blink (I tried to set 'once' param to 'true' but it didn't help). Why's that and what's the correct way to achieve animation transition for the second run?

 

Thanks in advance!

See the Pen RwLBRaR by KDetected (@KDetected) on CodePen

[KDetected]

Second demo: 

See the Pen oNGMLwj by KDetected (@KDetected) on CodePen

[OSUblake]

Hi KDetected,

 

1 hour ago, KDetected said:

When I'm using scrollTrigger and set duration to zero (0), the animation runs immediately when the page loads.

 

A 0 duration tween is the same thing as set. There is no animation, so it's the same as this.

.set(".b", { backgroundColor: "red" })

 

Also, it might worth checking out this article to understand how from animations work.

 

 

The second demo, you control the behavior with toggleActions.

Quote

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

I would also recommend creating your ScrollTrigger in the timeline. I moved the box down a bit so you can see.

 

See the Pen MWEBjqy by GreenSock (@GreenSock) on CodePen

 

 

lkjhkjkl

[KDetected]

@OSUblake thanks for explaining! Just still can't realize why animation transition time affects on animation delay, as changing transition time to zero shouldn't move the animation to the start of queue, shouldn't it?

[OSUblake]

4 hours ago, KDetected said:

Just still can't realize why animation transition time affects on animation delay, as changing transition time to zero shouldn't move the animation to the start of queue, shouldn't it?

 

I'm not sure what you mean by this. Can you explain what you are trying to accomplish?

 

[KDetected]

13 hours ago, OSUblake said:

I'm not sure what you mean by this. Can you explain what you are trying to accomplish?

 

Sorry, I mean, when using scrollTrigger, I want the animation to run only after page is scrolled to it. And it works fine when duration is set to almost zero small value (like, 0.001).

But if I set the duration to 0, it runs immediately after the page loads like there's no scrollTrigger condition at all

[GreenSock]

Yes, as far as I can tell, it's working as expected. As the docs say, tweens with a ScrollTrigger applied will have immediateRender set to true in order to maximize performance (start/end values get locked & loaded and ready to fire immediately when the scroll position is hit). And immediateRender is set to true by default for .fromTo() tweens as well. 

 

So if you don't want that behavior, simply set immediateRender: false. 

 

As for playing forward and rewinding when scrolling the opposite direction, the problem with a zero-duration tween is that the starting time is exactly on top of the ending time, so they're simultaneous. Think about the scroll like it's scrubbing the playhead backwards or forwards...if you have a zero-duration tween, there's literally nowhere for the playhead to move! Both the start and end are identical. So I'd recommend giving your tween at least a small duration, even if it's imperceptible (0.001). 

 

Does that answer your question? 

[KDetected]

12 hours ago, GreenSock said:

Does that answer your question? 

About blinking, I tried immediateRender set to false, but it didn't do the trick

See the Pen zYEJBZy by KDetected (@KDetected) on CodePen

 

About the zero timing, I'd just think on it as of some kind of special exception, thank you

[GreenSock]

2 hours ago, KDetected said:

About blinking, I tried immediateRender set to false, but it didn't do the trick

 

Oh, that's because you're making one of the most common mistakes - you NESTED a scrollTrigger in a tween that's INSIDE a timeline rather than putting the ScrollTrigger on the timeline itself. It logically can't work that way - either the timeline controls the playhead -OR- the scroll position does. It cannot be both because they'd conflict. 

 

See the Pen ExwegzW?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up?

[KDetected]

10 hours ago, GreenSock said:

Does that clear things up?

It is, thanks so much!!

 

So if I understood correctly, scrollTrigger should be defined in the timeline (gsap.timeline({scrollTrigger:...})) either it should be just gsap.to({scrollTrigger:..}) 

[GreenSock]

20 hours ago, KDetected said:

So if I understood correctly, scrollTrigger should be defined in the timeline (gsap.timeline({scrollTrigger:...})) either it should be just gsap.to({scrollTrigger:..}) 

Right, if you're using a timeline, the ScrollTrigger should be on that. If you're just doing a simple tween (not nested in a timeline), you can just put the ScrollTrigger on the tween itself. 👍