Jump to content
Search Community

Target an array of timelines

rgfx 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

Hi,

 

I get a "timelines.pause is not a function" when I try to target an array of timelines all at once. 

 

I know I can target them like so.

timelines[0].pause();
timelines[1].pause();

 

but I would like to do something like this.

 

timelines.pause();

 

like always, not a GSAP issue rather my lack of js knowledge :) So grateful to you guys. 

 

 

See the Pen 0e617b95d2082f79e9a1381a90e070bd by rgfx (@rgfx) on CodePen

Link to comment
Share on other sites

Probably don't understand something. But I don't want to target every timeline, as I have many timelines starting and stopping as you scroll down the page. 

 

Also discovered that exportRoot() with my code timelines[0].progress(0.3); seems to prevent my "tlTest" timeline from firing until the "timelines" is complete. Any clue? 

 

 

Link to comment
Share on other sites

o.k. - I didn't understand there would be more timelines and tweens on the page. exportRoot() probably wouldn't be useful for your needs in this case.

 

My first thought is why separate those timelines? If you want them to pause/play together, wouldn't putting both elements on the same timeline be easier to create and control? If they will be too complex for one timeline, maybe create them in functions and return them to a master which would be easy to control. If none of that works for your needs, a loop to go through the array of timelines and pause/play might be a way to go.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

If I put them in a master timeline I won't be able to alter their initial progress. 

 

I kinda just wanted to hear that using a loop was my only option. That there isn't a method in JS,  like SelectAllArray or something. 

 

Thanks

 

 

 

Link to comment
Share on other sites

15 hours ago, rgfx said:

I kinda just wanted to hear that using a loop was my only option. That there isn't a method in JS,  like SelectAllArray or something. 

 

Arrays have a lot of built in methods that will do the looping for you.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Iteration_methods

 

Using forEach you could pause all the timelines like this.

timelines.forEach(pause);

function pause(tl) {
  tl.pause();
}

 

Or like this using an arrow function (ES6)

timelines.forEach(tl => tl.pause());

 

  • Like 4
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...