Jump to content
GreenSock

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

Jump to label in timeline

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

Hi!

 

I have a timeline with labels/chapters. It plays and a callback is executed on every label, but the problem I'm having is to make the labels clickable, so you could jump to a certain label. It's hard to explain, so I made a jsfiddle:

http://jsfiddle.net/robbue/56jW6/

 

When you click on a chapter the timeline jumps to the label, but the timeline is played correct after that.

 

The labels and callback is added at line 136 and 137.

Code for jumping to a label (not working correctly) is on 156, 157 and 159

 

I have tried several thing without luck: currentLabel(chapter), pause(chapter, false), seek(chapter, false);

 

How could I solve this?

Link to comment
Share on other sites

Hi,

 

First, great job on the fiddle, very nice!

Thank you for providing a file that is easy to test.

 

I don't know if I am understanding exactly what the desired behavior is, but I'm assuming that once you click on a chapter's circle you want to jump to the appropriate label in the timeline and have it stop.

 

The trouble you are having is that the timeline resumes playback after you click on a circle. If that is correct, I believe the answer lies here:

 

 

 

 

config.document.on({
    click: function () {
        config.currentChapter = $(this).index();
        console.log("label clicked = " + config.currentChapter);
        config.timeLine.pause();
        config.timeLine.play("chapter-"+ config.currentChapter);
        changeChapter(config.currentChapter, true);
               
},

 

It appears you are telling the timeline to play immediately after you tell it to pause.

 

Try this instead

 

 

 

config.document.on({
    click: function () {
        config.currentChapter = $(this).index();
        console.log("label clicked = " + config.currentChapter);
        config.timeLine.pause("chapter-"+ config.currentChapter);
        changeChapter(config.currentChapter, true);
               
},
 

 

 

If not, please try to explain the issue again. I'm sure we can help.

 

Also, I noticed you were creating individual tweens to adjust the length of the progress bar to match the amount of delay/time between the labels. Just want to point out that you can have that animation be part of the timeline and then you won't have to manually be changing the width of the progress bar.

 

 

 

//when you loop through each element and create the timeline

config.timeLine.addLabel('chapter-' + index);
config.timeLine.addCallback(changeChapter, 'chapter-' + index, [index]);
config.timeLine.to('.tl-progress', durationAdd, { width: config.nodeWidth * (index + 1), ease: Linear.easeNone});
 

you can see it here: http://jsfiddle.net/6pdhR/4/

 

Also I want to point out that instead of using callbacks to change the text content of your elements you can use the TextPlugin. This will enable you to have the text-changes be part of your timeline.

 

http://api.greensock.com/js/com/greensock/plugins/TextPlugin.html

 

usage: 

See the Pen mscjD by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Thanks for helping me!

 

I don't know if I am understanding exactly what the desired behavior is, but I'm assuming that once you click on a chapter's circle you want to jump to the appropriate label in the timeline and have it stop.

 

Once I clicked it I want it to jump to the appropriate label and then start playing from that label.

 

 

Also, I noticed you were creating individual tweens to adjust the length of the progress bar to match the amount of delay/time between the labels. Just want to point out that you can have that animation be part of the timeline and then you won't have to manually be changing the width of the progress bar.

 

Thanks for the tip! I'll make the changes.

 

 

Also I want to point out that instead of using callbacks to change the text content of your elements you can use the TextPlugin. This will enable you to have the text-changes be part of your timeline.

 

I will have a look at it, I will also do some animation with the background image, so I'll need to take a closer look at it.

 

 

Thanks again for helping optimize the code, really appreciate it! Please let me know if there is more I could optimize. I want to make a more structured code, object-oriented I guess, but need to learn it first :)

Link to comment
Share on other sites

if you want the timeline to continue playing every time you click a chapter circle you can just use seek()

config.timeLine.seek("chapter-"+ config.currentChapter)

http://jsfiddle.net/6pdhR/6/

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.
×