.from() Problem

[schwabencode 0 Likes (Newbie)]

Hi, 

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?

 

thanks,
Oliver

 

[jamiejefferson 1,193 Likes (Superhero)]

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().

[GreenSock 12,926 Likes (Superhero)]

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. 

[schwabencode 0 Likes (Newbie)]

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.

 

Thanks,

Oliver