Jump to content
GreenSock

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

Overwrite a tween in another timeline (animate cc)

Recommended Posts

 

(In Animate CC) I have been at this for a while but cant figure out how to restart an animation from the beginning values when I use an overwrite.

 

A basic example. On "tl2" timeline a symbol scales slowly from  0 to 100.

After 3 seconds "tl" timeline overwrites and scales this symbol back to 0.

Both of these timelines are nested inside a "maintl" that runs on a endless loop.

In this case when "maintl" restarts the "tl2" symbol is not  at 0 scale but at where it was cleared and scaled back to 0 by "tl".

How to restart the "maintl" so that scaling starts again from 0.

 

var maintl = gsap.timeline({repeat:-1});
var tl = gsap.timeline({repeat:0});
var tl2 = gsap.timeline({repeat:0});


//tl1


tl.to([this.ring],{duration:0.5, scale:0, ease:"none", overwrite:"auto"},"+=3");
tl2.to([this.ring],{duration:6, scale:2.5, ease:"none"},"+=0");


//maintl
maintl.add(tl,0)//starts at time of 0
.add(tl2,0)
 

 

Thanks in advance.

 

 

 

 

 

Link to comment
Share on other sites

Hey Salakala. I recommend using .fromTo() instead if you need to do that sort of thing. Alternatively you could recreate the timeline when you restart it.

Link to comment
Share on other sites

35 minutes ago, ZachSaucier said:

Hey Salakala. I recommend using .fromTo() instead if you need to do that sort of thing. Alternatively you could recreate the timeline when you restart it.

Thank you for your anwser. Please elaborate. How would fromTo  resolve the situation.  The idea is that if I make banners then "tl2" is doing something (like scaling an image slowly in thebackground) while "tl" contains text and other animations that are mostly in sequence. In some cases whats happening in "tl" needs to affect "tl2" action (like stop the image from scaling and making it to scale to 0. 

 

Tanks

Link to comment
Share on other sites

Your code in a basic CodePen demo (which I assume shows the issue):

See the Pen QWKXPmv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I was mistaken when I said just a .fromTo() would solve your issue. I didn't notice you were overwriting things. We highly recommend that you provide a minimal demo that shows the issue from the start so that we can provide accurate information :) But I should have made one before recommending something.

 

The problem with overwriting your previous tweens is that overwriting kills off the previous tweens. So when the master timeline repeats, that tween is dead. If you need to keep this format, what I would do instead is create a new animation instead of using repeat:

See the Pen wvzLZNg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you can change the format, something like this makes much more sense:

See the Pen rNMEbbZ?editors=0010 by GreenSock (@GreenSock) on CodePen

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.
×