timeline.from not working in scrolltrigger

[SvenHenderickx]

Hello everyone,

 

I have a problem which I had for multiple projects already.

Whenever I use from in a timeline, combined with Scrolltrigger, it doesn't work. Using a timeline without scrolltrigger it seems to work fine. 

The codepen I added is an example.

GSAP Example From (codepen.io)

 

I recreated the same example with .to instead of .from and you can see it works fine.

See the Pen dydQNro by svenhenderickx (@svenhenderickx) on CodePen.

 

Can anyone help me with this problem? 

Thanks in advance.

See the Pen rNGwBxG by svenhenderickx (@svenhenderickx) on CodePen.

[SvenHenderickx]

I seem to have found the problem myself...

 

invalidateOnRefresh: true should be removed

Maybe anybody can explain the behavior that this completely breaks the timeline.from and doesn't change anything for timeline.to

 

See the Pen MWQzJNP by svenhenderickx (@svenhenderickx) on CodePen.

 

 

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks so much for providing the very clear demos, it's so helpful.

 

It appears removing invalidateOnRefresh  or setting it to false will make things work as you expect

 

See the Pen RwQqpPo?editors=1010 by snorkltv (@snorkltv) on CodePen.

 

With from() tweens they render immediately, meaning that when your page first loads the opacity gets set to 0 and the tween is created that will animate opacity from 0 to 1. However, it appears those tweens are also being instantly invalidated leaving the opacity at 0. then the tweens are created again using opacity 0 as the start state. Now your tweens are trying to animate from opacity 0 to opacity 0 which means the opacity will always be 0.

 

This is just my guess at what is happening. @GreenSock can offer more insight as to whether its a bug or expected behavior.

 

EDIT: it looks like you just found the invalidateOnRefresh cause. nice work!

 

 

[Cassie]

Funny timing - I was actually wondering this too. This pen I put together yesterday works with fromTo and invalidateOnRefresh but not just from. I was just reading up and trying to figure out if I was missing something

See the Pen eYVQzpy?editors=0010 by Aizazulhaq (@Aizazulhaq) on CodePen.

[Carl]

37 minutes ago, Cassie said:

This pen I put together yesterday works with fromTo and invalidateOnRefresh but not just from

 

yeah, that's a good work around as setting the to() value explicitly prevents it from getting wonked by the invalidation. 

 

I guess we just have to see if this merits an official warning or documentation about using from() and invalidateOnRefresh together. 

[areebabbas83]

On 6/10/2022 at 4:07 PM, SvenHenderickx said:

I seem to have found the problem myself...

 

invalidateOnRefresh: true should be removed

Maybe anybody can explain the behavior that this completely breaks the timeline.from and doesn't change anything for timeline.to

brother thanks for saving.


but my problem was I was not using the utils.Array() I don't know why that's a big deal as though I had done a lot of animations without it but its first-time this problem arises

Edited November 10, 2024 by mvaneijgen
Please keep your language in check