Jump to content
GreenSock

resting

Reanimating elements

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

Is there anyway to reanimate an element in a single timeline?

My guess is probably not, but I have a animate sequence that ends with the animation of the first frame.

In the codepen example, I want to animate box1, then box2, then box1 again (exact same animation as the first time it ran).

How should I approach this problem?

 

 

See the Pen oLZPJq by resting (@resting) on CodePen

Link to comment
Share on other sites

Hi resting  :)

 

Welcome to the GreenSock forums.

 

I'm not sure I understand your question, but based on your pen, you want box1 and box2 to move 200px and then you want box 1 to move exactly the same way again? If that's what you want, you have some options. You could set() box1 back to a position of 0 and then animate it 200px again. I'd probably use clearProps to clear everything from box1 and then you can animate it again. Either way will create a jump back to an x position of 0. 

t1.to(b1, 1, {x:200})
  .to(b2, 1, {x:200})
  .set(b1,{clearProps:"all"}) // this will jump it back to 0
  .to(b1, 1, {x:200});

Here's a fork of your pen. 

 

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

 

If I've misunderstood what you meant, please add some more details to your question.

 
Happy tweening.
:)
  • Like 1
Link to comment
Share on other sites

You can definitely re-animate the same element as many times as you want in the same timeline. And I wouldn't recommend using clearProps unless you must (it's very rare that you'd need that). If I understand your goal correctly, you can simply use a fromTo() the second time to make it jump back to 0 and animate to 200 again:

t1.to(".box1", 1, {x:200})
  .to(".box2", 1, {x:200})
  .fromTo(".box1", 1, {x:0}, {x:200});

http://codepen.io/anon/pen/beqZMv

 

There are other ways to do it too, like using a repeat with a repeatDelay, or even using a tween of a tween, but those are more advanced techniques that probably aren't necessary here. 

  • Like 3
Link to comment
Share on other sites

ha! Of course fromTo would be better.

 

What was I thinking?  :blink:  I probably shouldn't be answering questions before a morning dose of caffeine. :-P  

  • Like 2
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.
×