Jump to content


tweenlite to vs. from confusion

Moderator Tag
Go to solution Solved by ericshew,

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

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.





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

Link to comment
Share on other sites

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



Hopefully that makes sense and helps a bit.


Happy tweening.


  • Like 4
Link to comment
Share on other sites

  • Solution

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! 

  • Like 1
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.