Jump to content


unexpected behaviour when changing .from -> .fromTo

Go to solution Solved by jamiejefferson,

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

Just starting with GCAP. It's my understanding that .fromTo allows me to specify two different sets of values to achieve both a to and from tweening in one step.


I tried to use this in the following example:

var tl = new TimelineMax();

tl.from('#test', 1, {
left: -50,

tl.fromTo('#test2', 1, {
left: -50
  color : 'red'

example here: 


to my surprise #test2 only seems to do the 'to' part but no longer the 'from' left animation.


What am I missing?


See the Pen dGCsy by patrickklug (@patrickklug) on CodePen

Link to comment
Share on other sites

  • Solution

Hi, welcome to the forums.


fromTo() isn't used for the purpose of combining to() and from() tweens into a single call - it's only used to create a tween where you know both the start and end values for each property of the tween. If you only have one of the values, you would just use from() (start values) or to() (end values).


e.g. say #foo is at left:200, and we would like to tween it from left:0 to left:100. For this a single from() or to() tweens is not enough, and you would use fromTo()

TweenLite.fromTo("#foo", 1, { left: 0 }, { left: 100 }); // would tween from 0 to 100, as intended
TweenLite.from("#foo", 1, { left: 0 }); // would tween from 0 to 200
TweenLite.to("#foo", 1, { left: 100 }); // would tween from 200 to 100

For your codepen, it would probably be best to separate into 2 tweens: one for tweening to() red, and one for tweening from() left:-50

  • Like 1
Link to comment
Share on other sites

I see. Thanks for your help!


I didn't expect that I need to set this. I'm sure there is a reason but I fail to see why this is necessary. I'm trying to animate to different sets of properties. Why do I need to specify both a from and to?


EDIT: was posting at the same time as jamiejefferson. makes sense now. thanks for the clarification.

  • Like 1
Link to comment
Share on other sites

Blake has just offered one solution. Another would be to separate the fromTo() into the necessary from() and to() tweens:

tl.from('#test2', 1, {
  x: -50
.to('#test2', 1, {
  color : 'red'
}, "-=1");
  • 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.