Killing children animation timeline is removing it from its parent timeline

[5paceb0i]

So I want to view available small animation options first and have the ability to create a final animation by adding these small children animations to a parent timeline. Something like:

Available Small Animations: 1. <move up 100px> (2s) 2. <move down 100px> (2s)

Final animation can be a combination of small animation in any order and frequency: <move down 100px> <move down 100px> <move up 100px> <move down 100px> (8s)

 

I need to use temporary variable to view an animation, and add button will then add the last viewed i.e. child timeline stored in temp variable(lastAnimation).

 

When I preview animation when another animation is playing, I want to stop playing the previous animation and start the new one. The problem is killing the temp variable animation is also removing it from the final timeline if it was added. Even if I add 10 child animations, the final animation timeline only has the last animation that was added. This problem is not occurring if I don't kill the animations and wait until the animation is complete and then add it.

 

The demo is simplified for CSS but my use case is for three.js animation so I need to use timelines to create simple animation that require position and rotation animation simultaneously.

 

What am I missing?

See the Pen ZEmqGVG?editors=1111 by spaceboyy (@spaceboyy) on CodePen

[Cassie]

Heya!

 

So that's what kill does. From the docs.
 

Quote

.kill( target:Object, propertiesList:String ) : self
Kills the animation entirely or in part depending on the parameters. To kill means to immediately stop the animation, remove it from its parent timeline, and release it for garbage collection.

Maybe .progress(0).pause() would do the job?

That or separating things out so that the animation that plays on button click is dynamic and then you also store a timeline that gets added? 

[5paceb0i]

16 minutes ago, Cassie said:

Maybe .progress(0).pause() would do the job?

That keeps the child timelines paused in my parent timeline. So when I play the parent timeline except last child animation all the other child animations are still paused. 

 

A kind of work around for this I just found was setting the progress of previously playing animation to 1. This seems to be working (it isn't breaking as of now).

 

New small problem:

Only thing is when the child animation is added to the parent timeline, the child animation is played again when I add it & if I keep parent timeline paused while instantiating, the child animation that is playing stops immediately when I hit add. Let me know if I need to create a new topic

[Rodrigo]

23 minutes ago, 5paceb0i said:

Only thing is when the child animation is added to the parent timeline, the child animation is played again when I add it & if I keep parent timeline paused while instantiating, the child animation that is playing stops immediately when I hit add. Let me know if I need to create a new topic

Do you have a minimal demo for this? The previous one still has the kill method in it, so my guess that it doesn't fully reflect what you're mentioning here.

 

Happy Tweening!

[5paceb0i]

Hey @Rodrigo here's a minimal demo for it. : 

See the Pen yLQRZYR by spaceboyy (@spaceboyy) on CodePen

 

Steps to recreate issue 1:

1. Play animation 1

2. Add last animation

 

Issue 1:

Clicking "Add last animation" plays the last animation (animation 1 in this case) again interrupting the already playing animation1 from step 1.

 

------------------

 

Steps to recreate issue 2:

1. "Play animation 1"

2. "Add last animation"

3. "Add last animation"

4. "Global Play"

 

Issue 2:

Clicking on "Add last animation" more than once (2 times in this case) back to back, keeps first instance paused and only plays the second instance of animation when I play the global play (the parent timeline)

 

[GreenSock]

A tween instance cannot live in two places at once. Think of it sorta like a <div> that you put into two different parents:

let child = document.createElement("div");

parent1.appendChild(child);
parent2.appendChild(child);

Putting the child into parent2 would of course remove it from parent1 because it can't live in both places simultaneously. Same goes for a tween instance. 

 

Does that clear things up? 

[5paceb0i]

So is it like javascript objects, where only its reference is passed around?

[GreenSock]

Yep, GSAP is object-oriented which is super handy. That's what allows you to control things like: 

 

let tween = gsap.to(...);
                    
tween.pause();
tween.play();
tween.timeScale(0.5);
tween.seek(0.25);

 

[5paceb0i]

The behaviour now makes sense. Thanks a lot everyone!