Jump to content
GreenSock

SvenHenderickx

timeline.from not working in scrolltrigger

Go to solution Solved by SvenHenderickx,

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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

 

 

Link to comment
Share on other sites

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!

 

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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. 

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.
×