tweenlite to vs. from confusion

[ericshew]

Hi there,

 

I'm running into a challenge with Tweenlite from. What I'm doing is having some elements appear on the page when the footer comes into view. The problem is that the Tweenlite to works exactly as I am anticipating. Tweenlite from does not. I'm sure I'm overlooking something obvious.

 

The codepen has the FROM version active with the TO commented out. 

 

Thank you in advance for your help.

 

Best,

Eric 

 

See the Pen mOZzeM by ericsehw (@ericsehw) on CodePen

[PointC]

Hey Eric

 

You're seeing the expected behavior there with your from() tween.

 

What's happening is you're triggering the tween multiple times with your scroll listener. A from() tween immediately renders so you're rendering it at the the new size but then triggering again, but this time the start size and end size are now the same.

 

Just as a simple example: say you have a div that is 100px wide set via your CSS. You trigger a tween to size it down from() 200px. Immediately upon the trigger event it will be set to 200px wide and then animate down to 100px. If you trigger it again before the animation has even started, the tween will overwrite itself and its new starting size is 200px so it appears that no animation is occurring because the start and end size are now the same. It is animating just from 200px to 200px.

 

One way to fix it would be to move your tween outside of your function and play() it with your scroll trigger. Here's a fork of your pen with that solution:

 

See the Pen QGewOq by PointC (@PointC) on CodePen

 

I switched your scale tween to a background color tween just because it's easier to see what's happening.

 

For more info about from():

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/

 

Hopefully that makes sense and helps a bit.

 

Happy tweening.

[ericshew]

Wow... makes total sense. This gives me a totally different way of thinking about this sort of project. Thank you very much for your prompt and very helpful response!