Jump to content
Search Community

Moving from [current] to [label] in a timeline?

jamesbcn test
Moderator Tag

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

In this codepen example I have five buttons, and a timeline with five labels. 


When clicking on a button I want to move from the current location in the timeline, to the label corresponding to the button. In other words if you click on button 2, the animation should go from wherever it currently is to the point at label "two", so if it was previously at "one" the timeline should play forward from label "one" to "two", but if it was at position "three" it should play backwards from "three" to "two". 



How do I do this? 


See the Pen wubJp by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks a lot for CodePen demo, it really helps.


What you will need to do is use TimelineMax's tweenTo() method.

Take a look here




You will notice that instead of using tl.add(TweenLite.to()) I used TimelineMax's .to() method to make the code shorter.

  • Like 1
Link to comment
Share on other sites

Also, you will notice that each of your tweens is using the default Power1.easeOut ease. So if you tween from label "two" to label "four", you will see the box speed up and slow down. One technique is to put Linear eases on all your tweens and then add a custom ease when you use tweenTo().


I also took the liberty in this example to simplify your code for your buttons using a little jQuery trick. Basically we just look inside each button for the text and then pass that in as the label for tweenTo()


var tl = new TimelineMax();

//add a tween that starts at "myLabel"
tl.to(element, 1, {x:100, ease:Linear.easeNone}, "one")
  .to(element, 1, {x:200, ease:Linear.easeNone}, "two")
  .to(element, 1, {x:300, ease:Linear.easeNone}, "three")
  .to(element, 1, {x:400, ease:Linear.easeNone}, "four")
  .to(element, 1, {x:500, ease:Linear.easeNone}, "five");

$(".navBtn").click(function() {
  var myText = $(this).find(".navText").text();
  tl.tweenTo(myText, {ease:Power1.easeOut})
  • Like 1
Link to comment
Share on other sites

  • 10 months later...

In case anyone came across this forum post with a particular use case like mine (e.g. seeking to a label time with sped-up playback), I used a TweenMax.to() call instead of TimelineMax.tweenTo():

function quickSeekToTimeLabel( timeline, label, duration ) {
  TweenMax.to( timeline, duration || 0.2, {time: timeline.getLabelTime(label)});
  • Like 2
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.
  • Create New...