Jump to content
GreenSock

panych

Seek method vs {paused: true}

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,
 
I have a main timeline, which is paused and controlled by `seek` method. And I have a tons of small timelines, which I want easily add or remove from main timeline. If you create some timeline, but don't place it in main timeline with `{paused: true}`, it will auto play. To prevent this, I decide to set `paused: true` for each small animation. But in this case `seek` method doesn't work. 
 
Example: 

See the Pen zidBA by panych (@panych) on CodePen


If you remove `{paused: true}` from childTl1 everything will work as I need.
 
I find one way to solve this: use `play` method for each paused animation, which placed into main timeline.
 
Is there something better or maybe another way to achieve needed result?
 
Thanks

Link to comment
Share on other sites

Hi and welcome to forums,

 

See the Pen rHyen by burnandbass (@burnandbass) on CodePen

:) See if this is working for you. After I create the timeline, I set the progress to 0 and pause it. Then I use play() instead of seek() to play it. 

Link to comment
Share on other sites

@bassta this is not an option in my case

Link to comment
Share on other sites

The only way to control main timeline is a `seek` method in my case. So it's not an option. 

 

I would like to know is this a feature or bug. If you can use `seek` when timeline paused, why you can't use it if this timeline is a part of another?

Link to comment
Share on other sites

Hi Panych. Welcome to the GreenSock forums.

 

Thanks so much for creating the codepen. 

 

 

The paused state of a nested timeline is always honored regardless of what is happening with its parent timeline.

 

The logic is, if you specifically tell a timeline to be paused, it should remain that way until it is told to play again.

 

So in your case, your nested timeline was paused via its constructor so it remains that way when you tell its parent timeline to play() or even if you call seek() the parent.

 

Although I can see how you are expecting different behavior, it is much better to honor the paused state than to ignore it. For instance, If a developer pauses a child timeline and then plays its parent its very likely that they would be surprised by the child playing as well. They'd be like "Hey, I paused you! What are you doing!" :)

 

When designing the API and we come across decisions like this, we feel its safer for things to behave exactly as the developer has told them to behave instead of relying on something "auto-magically" happening... like having a child that has been paused automatically start playing when its parent is played. 

 

 

----

 

Also to note is that seek() is different than play() in that seek also honors the paused state of the timeline it is called on.

 

If you have a paused timeline and you call 

 

play(1) // playhead jumps to time of 1 second and playback resumes

seek(1) //playhead jumps to time of 1 second and timeline remains paused.

 

 

Hopefully this clears things up. 

  • Like 2
Link to comment
Share on other sites

Appreciate for your deep explanation, its very helpful. Now that behavior is clear for me. 

 

I work on presentation, which progress fully depends on scrolling, so I find only a `seek` method useful, that's why I ignored advises from @bassta (thank you anyway). Some results you can find here: http://deploy1.teobit.ru/  (I will update link when will finish project).

 

Thanks

Link to comment
Share on other sites

  • 2 weeks later...

In this situation I've found two usefull workflows:

 

1. Create small timelines and then put them into main paused timeline. 

Limitation: you can't free add or remove child timelines - it will cause autoplaying.

var childTl1 = new TimelineMax();
childTl1.to(elem, 1, {top: -100});

var childTl2 = new TimelineMax();
childTl2.to(elem2, 1, {top: 300});


var mainTl = new TimelineMax({paused: true});
mainTl.add( childTl1 );
mainTl.add( childTl2 );

2. Create small timelines with `{paused: true}` and call `play` method when will putting them into main timeline.

var childTl1 = new TimelineMax({paused: true});
childTl1.to(elem, 1, {top: -100});

var childTl2 = new TimelineMax({paused: true});
childTl2.to(elem2, 1, {top: 300});


var mainTl = new TimelineMax({paused: true});
mainTl.add( childTl1.play() );
mainTl.add( childTl2.play() );
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.
×