Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nicolethenerd

Animation w/ Discrete Steps/Scenes

Recommended Posts

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 (

See the Pen XJJEQd by frankrue (@frankrue) on CodePen

) 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
            };
        
    })();

See the Pen XJJEQd) by frankrue (@frankrue) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Unfortunately I have no time to create and test some code right now, but I have an idea that hopefully could help.

 

One thing that comes to my mind is create the continuous tweens outside the timeline, but control their playback from the timeline, using the call() method and the position parameter in the next tween, in order to generate the required gap between both instances:

var tl = new TimelineLite(),
    loopTween = TweenMax.to(rotator, 1, {rotation:360, ease:Linear.easeNone, repeat:-1, paused:true});

tl
  .to(element-1, 2, {foo:bar})
  .to(element-2, 1, {foo:bar})
  // start the loop tween
  .call(function(){loopTween.play();})
  //add the next instance after the previous tween's first cycle
  .to(element-3, 1, {foo:bar}, "+="+loopTween.duration())
  //pause the timeline
  .addPause();

//then when the user presses space you can pause the loop animation
Give it a try and let us know how it goes. Hopefully another user might chime in and drop a better idea.

 

Rodrigo.

  • Like 3
Link to post
Share on other sites

Hi,

I'm sorry, I completely forgot about the endTime() method available since version 1.14, you should take a look at it and see if it helps:

 

http://greensock.com/docs/#/HTML5/Animation/TweenMax/endTime/

 

This will give you the ending in the timeline after the first pass. I'm not completely sure how this could help more than my previous suggestion, but I thought it was important to mention it.

  • Like 1
Link to post
Share on other sites
  • 4 weeks later...

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?)

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×