Jump to content


.from() Problem

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I'm making heavy use of .from() tweens within a Timeline. 

Especially from autoAlpha:0.

Now in some circumstances (maybe if an image is not yet loaded) elements stay at their state given to from() and don't tween to their original value. In my case autoAlpha:0 -> to autoAlpha:1

This happens really unfrequent - in Firefox and Chrome.

I'm just too lazy to use fromTo() Tweens :-)

Is there anything I can do to avoid this kind of behaviour?




Link to comment
Share on other sites

You say the element's "don't tween to their original value", but that's not what a .from() tween does. The destination ('original') value is based on the current value at the time the .from() is created, not what it was when the document loaded. They also default to immediateRender:true, which means that if you tween from autoAlpha:0, visibility:hidden and opacity:0 are immediately applied to the element.


What I imagine is happening is that you are tweening from autoAlpha:0 twice on a single GSAP update (or in a short amount of time), such that the second tween reads the current value as opacity:0 (or close to 0).


If you think calls to .from() on an element may be occurring twice on the same update, then immediateRender:false may help you out. Otherwise you will probably need to use .fromTo().

Link to comment
Share on other sites

Yep, I suspect Jamie is correct. That's by far the most common thing that trips people up with from() tweens - the current values are used for the end values, but often people forget that they're changing the current values right before they start their from() tween. And like Jamie said, immediateRender is true (because that's what most developers find intuitive for from() and fromTo() tweens). 


For example, imagine an element that starts at opacity:1 and upon rollover, a from() tween fades it in from opacity:0 over the course of 2 seconds (kinda silly, but hang with me here...). When you rollover the first time, everything works great, but then what if you rollout and then rollover right when that previous tween was halfway done? At that point, opacity is 0.5 (assuming a linear ease), so the END value of the new from() tween will be 0.5, thus you'd see the object animate from opacity 0 to 0.5 and then stop. The tweening engine is doing its job perfectly, but many developers scratch their head, thinking "my tween broke! Why is it stopping at 0.5 instead of going all the way to 1?" It's a logic problem in their code, not a problem with tweens breaking. 


If you're still running into trouble, please post a very simple example (codepen or jsfiddle or HTML doc) that demonstrates the problem. 

Link to comment
Share on other sites

thanks for your replies and the explanation.

I think I'm using from() in the correct way, and most of the time everything works fine. 

I'm doing hard to reproduce.

I think I will replace from() with fromTo.




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.