Jump to content
GreenSock

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

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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
  • Like 3
Link to comment
Share on other sites

Alright :D 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-)

Link to comment
Share on other sites

  • 10 months later...

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.

Link to comment
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.
×