How to control/play/reverse to a specific tween inside a Timeline then pause after animation

[Pat 0 Likes (Newbie)]

Is it possible for GSAP to do what I think.

Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause.

 

Here's the code sample:

 

HTML

<div class="book">
    <div class="last page"></div>
    <div class="page one"></div>
    ...
    <div class="cover page"></div>
</div>

<div id="prevPage"></div>
<div id="nextPage"></div>

JAVASCRIPT

var book_timeline = new TimelineMax({ paused: true })

    /* tween children */

    .to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' })
  
    .to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' })

    .to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' })

    .to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' });

$('#nextPage').click(function(){
    // code that animates only one (next page) tween inside a timeline then pause
    book_timeline.play();
});

$('#prevPage').click(function(){
    book_timeline.reverse();
});

I want to use GSAP to make my own book flipping div's

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

You can mark the insertion point (startTIme) of your tweens by adding labels to your timeline.

To add a tween to the end of the timeline and insert a label of "blue" at the start of that tween you would do

tl.to("#blueBox", 1, {x:550, "blue"});

Once the label is in you can pass it into a number of TimelineLite/Max methods

tl.play("blue");
tl.pause("blue");
tl.reverse("blue");
tl.play("blue+=2"); //play 2 seconds after the blue label

//TimelineMax only
tl.tweenTo("blue");
tl.tweenFrom("blue");
tl.tweenFromTo("blue", "someOtherLabel");
tl.getLabelAfter("blue") // returns next label after blue

More options for adding and using labels can be found in the TimelineLite and TimelineMax docs.

 

One option is to add each tween at a unique label and then after the tween insert a pause via addPause(). 

tl.to("#blueBox", 1, {x:550, "blue"});
tl.addPause();

//then later
tl.play("blue"); // jump to blue label

That will make the the timeline play from the blue label and then naturally pause when the tween is over.

 

However using lots of addPause() calls can make it more troublesome if you ever want to play through the timeline without the pauses.

 

I think the best approach here is to utilize TimelineMax's tweenFromTo() method which allows you to define a start and end position for the segment of the timeline you want to play. You can provide the start and end values in time (seconds) or labels.

 

A simplified example below:

 

var tl = new TimelineMax()


tl.to("#redBox", 1, {x:550}, "red")
  .to("#blueBox", 1, {x:550}, "blue")
  .to("#greenBox", 1, {x:550}, "green");




$("#playBlue").on("click", function() {
  tl.tweenFromTo("blue", "green");
})

http://codepen.io/GreenSock/pen/Cmdun

[Carl 9,066 Likes (Superhero)]

For a more dynamic approach you could do:

 

var tl = new TimelineMax()

tl.to("#redBox", 1, {x:550}, "red")
  .to("#blueBox", 1, {x:550}, "blue")
  .to("#greenBox", 1, {x:550}, "green")
  .add("end")

$("button").on("click", function(){
    var thisLabel =  this.innerHTML;
    tl.pause(thisLabel);
    tl.tweenTo(tl.getLabelAfter());
})

http://codepen.io/GreenSock/pen/HpGuC

[Pat 0 Likes (Newbie)]

Alright I was right on my idea that this 'label' thingy, that I was looking in the api for hours, is the answer. But I was confused on how to do it using the convenience methods.

 

Thank you Carl for the tips it helped me a lot.

Awesome GSAP! I love it. My top 1 favorite library! B-)

[alwayzambitious 54 Likes (Contributor)]

I have to say, I had the same question as the original poster. I am really really impressed... at the solutions presented especially dynamic ones. I am digging into TimelineMax more Thanks Carl and Jack.