Jump to content
Search Community

On click, play timeline from a certain label

momciloo 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

Hello,

 

First time posting here, but already learned a lot of great things on this forum. Thank you community!

 

I am having a problem with playing timeline from a certain point (label).

 

I have one master timeline, which is holding a lot of smaller timelines, functions etc. And I have main navigation (regular buttons), that should control navigating through the main (master) timeline.

 

const master = new TimelineMax();

master.add( preload )

      .add( audio_togle, '+=13' )

      .add( particles )

      .add( navigation_show )

      .add( videoSize, 'particles+=2' )
      .add(function () { videoPlay('intro') })

      .add( parallax )

      .add( scene_first_show, 'scene1show' )
      .add( pause )

      .add( scene_first_hide, 'scene1hide' )
      .add( pause )

      .add(function () { scene(text[0]) }, 'home' )
      .add( pause )

      .add(function () { scene(text[1]) }, 'about')
      .add(pause)

      .add(function () { scene(text[2]) }, 'contact')
      .add(pause)

      .add(function () { scene(text[3]) }, 'portfolio')
      .add(pause)

      .add(function () { videoPlay('outro')})

      .add( scene_final, 'finalLogo')
      .add(pause)

function pause() {
      master.pause();
      masterIsPaused = master.paused();
      console.log('Master is paused');
}

 

 

And I have that main navigation button, where on click, I check it's `data-show` attribute, and use it as a label name. 

 

mainNavItem.on('click', function () {
    $self.addClass('is-active');
    mainNav_hide();
    var whatToShow = $self.data('show');
    master.seek(whatToShow);
});

 

But `master.seek(whatToShow);` doesn't work at all. 

How can I jump to certain label and play from there?

 

Thank you,

Mo

Link to comment
Share on other sites

BTW what are you doing by adding so many pauses in your example? It is confusing to be honest, what are you trying to do?

 

EDIT: Ohk that's the exact problem here, timeline just seeks the label and pauses because you are adding pauses everywhere. Post a demo and let us know what are you trying to do so we can suggest correct approach.

 

See the Pen badeMe?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hello,

 

Thanks for fast response. I posted only this, without a demo, since I wanted to check if what you currently see seems alright. 

When I try master.play('certainLabel'), it behaves literary as master.resume();

 

I have that much pauses because each section has it's own "next" button, which just resumes the master timeline. Maybe it's not the best approach, but that's why I am here asking the question :)

Link to comment
Share on other sites

Adding a function that calls pause() can cause some slight issues as it takes time for the function that calls pause() to execute. This means that the playhead will never stop exactly where you use add(pause)

 

This is why we have a special addPause() method that alleviates that time-drift.

Please read: https://greensock.com/docs/TimelineLite/addPause()

 

I think the issue you are running into is that your pause functions are occurring exactly at the labels you are seeking to. So you are literally seeking to a label and then calling a function which pauses the animation.

 

You may just want to put your labels slightly after the pauses like

.add(function () { scene(text[1]) }, 'about')
      .addPause()
     .add("contact", "+=0.001");
     .add(function () { scene(text[2]) }, 'contact')
     .addPause()

 

  • Like 2
Link to comment
Share on other sites

I think I managed to better understand the problem, so here is the reduced explanation:

 

What I think is happening, is that when I want to play an animation from a certain point in time, it also runs functions before.

In the example here, when I click the button, I am expecting only the function with 'audio' label to run when I click on audio button, but what it does is just playing master timeline from the beginning. 

 

See the Pen eyNxqd?editors=1011 by Momciloo (@Momciloo) on CodePen

 

What is the real usage here, is that I have master timeline, that has nested timelines in it, and each nested timeline should play one by one, and has "next" button at the end of it's animation. So only clicking on "next" should resume master animation. But I also have external navigation, where I can choose which part of the master animation I want to play. 

 

Thank you!

Link to comment
Share on other sites

As Carl said, using addPause should resolve your issue.

 

See the Pen vpOPjM?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Looking at the demo you just updated, you are again in this extremely rare situation of multiple zero duration calls. I doubt GSAP was built for such usage. I am also not sure why are you trying to do this with gsap instead of using normal JavaScript calls as independent functions. Anyway, you can solve this by adding extremely small duration, which won't be noticeable.

 

See the Pen EojMzp?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

You can also check yesterday's thread that discusses this exact situation.

 

 

Link to comment
Share on other sites

Thanks for the demo. It helped me see what is happening. The big problem is that your use of call() was malformed.

Where you were specifying the position (labels) is actually where the scope parameter goes, thus your timeline didn't have any labels in it

 

Don't feel bad, I had to look it up myself.

 

https://greensock.com/docs/TimelineLite/call()

 

So you can pass in this or null as the scope as it really isn't necessary in your context (that I can tell).

 

Doing that you can add your labels just a little bit after each addPause()

 

See if this does what you need:

 

See the Pen BJoyVZ?editors=1011 by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

Do you mean his first code sample (first post) I don't see a demo with just call() and addPause().

If you have addPause() and call() all at the same time, no that won't do anything good. you need to have time in between.

If you have a demo of something you tried that didn't work, let me know

Link to comment
Share on other sites

Ya here is the demo, everything works except "Message 3" button. It calls entire timeline while other buttons pause after single call.

 

See the Pen EojMzp?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

EDIT: Though I feel like GSAP wasn't really designed for anything like this and neither I feel like using timeline here is useful, simple JavaScript function can be used in my opinion.

Link to comment
Share on other sites

Thanks for the demo. 

 

 

I was actually surprised what you had worked at all

 .addPause("+=0.01")
.call(helloMessage, ["Mick"], master, "message2+=0.01")
.addPause("+=0.01")
.call(playAudio, ["song.mp3"], master, "audio2+=0.01")

 

It's been my understanding that you should always add a label prior to trying to add something relative to a label.

 

 

If you follow this approach it should work fine

 

.call(helloMessage, ["John"], master, "message1")
    .addPause("+=0.01")
    .add("audio", "+=0.1")
    .call(playAudio, ["song.mp3"], master, "audio")
    .addPause("+=0.01")
    .add("message2", "+=0.1")
    .call(helloMessage, ["Mick"], master, "message2")

 

See the Pen jYbxOB?editors=0011 by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Thanks Carl, still had to add little delay to last call otherwise it wasn't responding to consequent clicks.

 

See the Pen LepmqY?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Quote

It's been my understanding that you should always add a label prior to trying to add something relative to a label.

 

Well I don't know, I had been playing around with position parameter and it worked. :D 

 

The only thing I haven't been able to achieve with simple labels is, lets say you have 2 child tweens, first plays for 2 seconds and second tween's duration is unknown/random. So the first tween starts and and second tween start later but finishes with first tween. So basically second tween's start time = first tween's duration - second tweens duration. I know we can calculate duration but I was curious if it can be done out of box.

 

https://codepen.io/Sahil89/pen/jYbxXz?editors=0010

 

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