Jump to content
Search Community

Re-Run tween in a timeline at a later point in the timeline

JensK test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hello all,

I am having a tiny problem with a tween in a timeline which after it stopped shoud repeat after some other tweens are done.
 

The codepen I created illustrates the problem.

 

What I want:
1. red box animates and stops
2. blue box animates and stops
3. red box reruns and stops

 

What I get:
1. ----

2. blue box animates and stops
3. red box reruns and stops

 
I am pretty sure, that it is just a concept I am not aware of and the fix would be rather simple, but I can't figure it out.
 
(I tried to find a related Problem, but didnt have the right query, so appologies if this has been answered before)
 
Greetings
-Jens

See the Pen oZKEyg by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

There are several issues with that. A tween can be part of a timeline in only one place, and will be controlled by it's parent, so you would need to restart the timeline in some way to replay the same tween.

 

This is similar to what you are trying to do, but with 3 tweens...

See the Pen WpVzym?editors=0010 by osublake (@osublake) on CodePen

 

But I would recommend a better approach. Use functions to create your tweens. It reduces the amount of code you need to write, and you can pass parameters into your functions to customize the tween.

See the Pen aJeYVN?editors=0010 by osublake (@osublake) on CodePen

 

.

  • Like 4
Link to comment
Share on other sites

Thanks a lot for your answer,

I already had a function in place which returns a tween, but it used a cached tween if the tween already existed. With your hint it was easy to resolve this by just returning a newly created tween every time.

  • 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.
×
×
  • Create New...