Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

"from" animation wrong behavior

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 am trying to develop an animation web app that uses Greensock under the hood. The idea is to have a user interface that stores all the information parameters in an array and then a function translates that into an animation.

The loadAnimation() function fires everytime the array is modified so you can see the updated animation. Everything works fine if I use "to" tweens, but with the "from" tweens only works the first time loadAnimation() is executed.

I tried to reproduce the problem with the attached codepen. If you have only "to" tweens and you execute twice the loadAnimation() the animation is right, but if there is a "from" tween it stops working.

See the Pen baomGg by rimeiQuer (@rimeiQuer) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo.


Your from() tweens are working as designed. Remember a from() tween always animates from the value you provide to the existing value.


If you create a tween that  animates from x:1000 to x:0 the engine will immediately set the STARTING x value to 1000.

TweenLite.from(obj, 1, {x:1000});

//behind the scenes the engine sets x to 1000 and starts animating


if you create another identical tween immediately


TweenLite.from(obj, 1, {x:1000})


x is already 1000 (from the previous tween) so you are animating FROM 1000 to 1000.


Please see the comments in the demo below and watch the console. Hopefully it clearly illustrates what is happening when you are calling loadAnimation() twice.


See the Pen LezvrX?editors=0011 by GreenSock (@GreenSock) on CodePen


Your to() tweens always worked fine because they don't monkey with the start values of the object they use whatever the existing values are. 

  • Like 2
Link to comment
Share on other sites

Hello Carl,

Thank you very much for your fast and complete response :) .


I realized that my codepen demo wasn't very clear so I modified it in order to better explain what I'm trying to do:

The idea is to have an array of objects defining the animation (like a movie script) and each time I modify the animation array the timeline gets overwritten.

I've added a tl_master.clear() command with the purpose of resetting the timeline before reloading the animation but maybe I'm not understanding right how it works.

In the updated codepen I try to recreate this steps:

  1. Load the animation data array
  2. Create the timeline
  3. Update the timeline using the animation data array
  4. Modify the animation array (commented out)
  5. Update the timeline with the new data (commented out)

 It seems that tl_master.clear() doesn't reset the timeline as I thought it would. If I use only "to" and "fromTo" tweens I can change parameters or add new tweens and the animation updates right. The moment that I add a "from" tween it doesn't work after updating the timeline.

In my example, after step 5 the item1 animation should start at position 3, but it doesn't.


I hope that my problem is clearer now. I'm sorry, but I'm not very fluent in english.





Link to comment
Share on other sites

I haven't had time to I castigate your latest demo. 


Keep in mind that clear() only removes tweens from a timeline. It doesn't reset any values that were animated. 


To remove all properties (inline styles)  that were set you can do 


TweenLite.set(targets, {clearProps:"all"})


you will probably have to loop through your array of animations to find each target. 


Link to comment
Share on other sites

Castigate should be investigate. Silly phone 

  • Haha 2
Link to comment
Share on other sites

@CarlI was wondering if you intended to scold that demo. :lol:

  • Haha 1
Link to comment
Share on other sites

I'm positive that if you castigate the demo enough it would revert to its original ways.

Link to comment
Share on other sites

Thanks again Carl,

That was the problem I was having. I thought that using timeline.clear() I would reset everything, but the animated values were still there.

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.