5paceb0i Posted July 27, 2023 Share Posted July 27, 2023 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 Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2023 Share Posted July 27, 2023 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? Link to comment Share on other sites More sharing options...
5paceb0i Posted July 27, 2023 Author Share Posted July 27, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted July 27, 2023 Share Posted July 27, 2023 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! Link to comment Share on other sites More sharing options...
5paceb0i Posted July 27, 2023 Author Share Posted July 27, 2023 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) Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 28, 2023 Solution Share Posted July 28, 2023 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? 1 Link to comment Share on other sites More sharing options...
5paceb0i Posted July 29, 2023 Author Share Posted July 29, 2023 So is it like javascript objects, where only its reference is passed around? Link to comment Share on other sites More sharing options...
GreenSock Posted July 29, 2023 Share Posted July 29, 2023 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); 1 Link to comment Share on other sites More sharing options...
5paceb0i Posted July 30, 2023 Author Share Posted July 30, 2023 The behaviour now makes sense. Thanks a lot everyone! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now