nicolethenerd

Wow! Thank you!

I've created a scene manager that wraps Greensock, with the intent of being able to step through animations one "step" at a time, kind of like a slideshow, except the steps are animated - each step is constructed from a child timeline. There are a few issues with it, but the one I am currently struggling with is that mainTimeline.isActive always returns false, even when the animation is clearly moving. http://codepen.io/nbieber/pen/pvQQPN Is this because mainTimeline is considered paused somehow even when it's child timelines are tweening? That doesn't seem right, since I'm trigging a play with mainTimeline.tweenFromTo - but I'm not sure what else it could be. Any help on how to detect whether the animation is currently playing would be appreciated. You'll see in the codepen I also tried a different approach, creating a variable called inMiddleOfStep and toggling it in onStart/onComplete callbacks, but this does not always work - sometimes the onComplete callbacks don't fire until the beginning of the next 'step.' Thanks!

Actually, after a bit more experimenting, I've discovered this doesn't quite work... if I jump around in the timeline (ie. seek to a previous step), the loop will still be playing, when it shouldn't be. What I really need is to be able to set a boolean "playing" property of the loop from w/in Greensock (which would control whether the timeline was playing), rather than triggering it w/ a function call, so that when I jump to specific labels, that property is set correctly. I'm having the same problem incorporating sound into my animations - when I move backwards in time, the sound still plays, since it is triggered w/ a function call and not attached to the timeline. I'm thinking of putting a wrapper around my loops and sounds that actually has this "playing" property, and using an Angular $watch to call play()/pause() based on it's value (I'm using AngularJS anyways in my project, not adding it in just for this - but it still feels like overkill and like it could potentially slow the animation down a lot - anybody have a better idea?)

Rodrigo's solution works - this is exactly what I was looking for, thank you!

I am trying to create an animation which consists of a series of "steps" - the user hits the space bar to play through to the end of the "step," at which point they can hit the space bar to play the next "step" or navigate to any step via its label. This codePen I found (http://codepen.io/frankrue/pen/XJJEQd) would be perfect, except that some of my steps have animations which should repeat continuously until the next step is started, and the addPause at the end of each scene prevents this. (For example, imagine a loading spinner or something continuously moving on the orange box that continues to move once the user hits 'continue' to bring in the yellow box) My coworker and I created a "Stepper" abstraction that has a similar behavior to the codepen, but this has the same problem - stopping at the closeLabel means that any repeating animations which are supposed to keep repeating will stop. Any thoughts? Thanks! var Stepper = (function() { var mainTimeline = new TimelineMax({ paused: true }), steps = {}, stepOrder = [], currentStepIndex = 0; var closeLabel = function(base) { return base + 'End'; }; var appendStep = function(timeline, stepName) { steps[stepName] = timeline; stepOrder.push(stepName); mainTimeline.add(stepName); mainTimeline.add(timeline); mainTimeline.add(closeLabel(stepName)); }; var playAt = function(stepName) { currentStepIndex = _.indexOf(stepOrder, stepName); mainTimeline.tweenFromTo(stepName, closeLabel(stepName)); }; var playNext = function() { if(currentStepIndex < stepOrder.length - 1) { playAt(stepOrder[currentStepIndex + 1]); } }; return { mainTimeline: mainTimeline, steps: steps, appendStep: appendStep, playAt: playAt, playNext: playNext }; })();