MattC

I was writing out a follow-up question, but solved it myself. I thought I'd post the answer anyway, since I've already written it out and it might help someone else one day. How do I simultaneously pause and unpause a SteppedEase infinitely repeating animation? Using your answers I'm now able to have my little guys wander around their bezier paths. However I'm also animating their wanderings using a spritesheet and a looping SteppedEase easing. I've demonstrated a minimal example here: http://codepen.io/anon/pen/hylHC?editors=001 , where instead of animating a sprite sheet, I'm just counting the frames from 0 to 3. That count should stop wherever it's up to when the blue box pauses, and resume when the blue box starts moving again. I eventually achieve this by tweening the timescale property to zero (as demonstrated in the codepen carl schooff linked to), with an animation time of zero: tl.to(repeating_animation, 0, {timeScale:0}, 2) tl.to(repeating_animation 0, {timeScale:1}, 3)

Awesome! It all makes sense now. The tween objects themselves have properties (time, progress, timeScale) which can themselves be tweened. Very nice. Thank you kindly for your prompt and helpful replies. This framework and community are a pleasure to work with.

Hi guys, thanks for making a great product. I'm still trying to wrap my head around the logic of sequencing with GSAP. I've defined a whole stage show worth of animations. To make my little characters act I've used GSAP to animate sprite sheets using these techniques (link: http://codepen.io/anon/pen/dJliq) and to make them move around I've defined a whole bunch of tweens along complex twining bezier curves using the GSAP bezier plugin. I've set up all these animations individually, set them to {paused: true} and saved them as javascript variables. Now I just need to figure out how to sequence them nicely on a timeline. My current challenge is how to tell an animation along a bezier curve to stop (reverse, resume, etc) at a particular point in the timeline. This code pen (http://codepen.io/anon/pen/nqckA) has a minimal working example. I'd like the blue square to start follow its bez at 0 seconds, to pause at 5 seconds and resume at 8 seconds. Meanwhile, the squeare should continue to be animated exactly as it is now (i.e., I don't want to pause the entire timeline, just one element). My basic intuition is to do something like this: tl.add(blue_path.play(), 0); tl.add(blue_path.pause(), 5); tl.add(blue_path.play(), 8); but this simply causes the blue_path animation to pause until the 8-second mark. A working alternative I've found is to do this: tl.add(blue_path.play(), 0); tl.add(function(){blue_path.pause();}, 5); tl.add(function(){blue_path.play();}, 8); The trouble is, using this method I can no longer use the seek methods of the timeline itself. For example: tl.seek(6) would jump over the "pause" instruction above... Thanks for any help you can offer. I'm probably overlooking something simple or misunderstanding the logic of this system, but I've been struggling with this for days and could really use some guidance. Matt