Search the Community

While learning GSAP and Js, I'm experimenting with this Crab character – Bob. He can do a bunch of different poses which are specified in different timelines, in separate projects. My end goal is to have one dynamic composition with a bunch of ways to interact with Bob; move him, scare him, flatter him, etc, but I'm having some trouble with the logics beyond making a fun timeline. My Js experience is limited so please bare with me. I've created this simplified pen, without Bob, to explain my challenge: http://codepen.io/stromqvist/pen/YqMJEe?editors=0011 Basically, what I'm trying to solve is this: If a user clicks "left", Bob can walk left – no problem. But if Bob is walking left and the user clicks right, then Bob must first quit walking left and seamlessly transition to a new pose before he starts walking right. My animations are quite granular so I want full control over such transition animations too. So I need to write a little script. My approach to the problem: All poses are animations that should start and finish in the set start values There are three poses in the example: idle, move left and move right Each pose have three parts; "entry", "loop" and "exit" "Entry" animates the character from start values into the "loop" "Loop" is the main animation, i.e. "continuously walk left" "Exit" animates the character form the "loop" back to start values The "loop" is set to infinite repeat, which intentionally hinder the timeline to reach the "exit" To seamlessly transition from one pose to another, the current pose must end before the next pose begins To end the current pose I want to remove "repeat: -1" and allow the timeline to finish and the use a callback to start the next After "repeat: -1" been removed I need to add it again, to make a pose reusable This code doesn't work, but I included it to show you what I'm trying to achieve and how: // CLICK-A-BUTTON LOGICS $("button").click(function(){ // these values are strings, but I need to reference the objects nextPose = "tlPose" + this.dataset.tl; nextLoop = "tlLoop" + this.dataset.tl; // disable looping to reach "exit" label of currentPose TweenMax.set(currentLoop, {repeat:1}); // and re-enable it so it's looping next time it's used TweenMax.set(currentLoop, {repeat:-1}); // when currentPose is complete, update the current pose and play it currentPose.onComplete(function(){ currentPose = nextPose; currentPose.seek("entry").play(); }); }); Is the approach to this problem ok or should I try something else? When I'm defining newPose and newLoop, how can I make those values to be tlPose1 and not a string like so, "tlPose1"? How do I change the repeat value of a timeline? I'm very open to other suggestions and feedback! Thank you so much for helping me and Bob move forward! -- I struggled so with setting a descriptive topic to this post! Any conventions?