[scrollTrigger: why runs immediately and]

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:..}) 

[scrollTrigger: why runs immediately and]

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

[scrollTrigger: why runs immediately and]

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

[scrollTrigger: why runs immediately and]

@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?

[scrollTrigger: why runs immediately and]

Second demo: 

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

[scrollTrigger: why runs immediately and]

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