Target an array of timelines

[rgfx 37 Likes (Newbie)]

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

[PointC 11,163 Likes (Superhero)]

The exportRoot() method is handy for that kind of control.

 

https://greensock.com/docs/TimelineMax/static.exportRoot()

 

Hopefully that helps. Happy tweening.

[rgfx 37 Likes (Newbie)]

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? 

 

See the Pen 6e49e7d13a118e3f521827e0ccbb566b by rgfx (@rgfx) on CodePen

 

[PointC 11,163 Likes (Superhero)]

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.

[rgfx 37 Likes (Newbie)]

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

 

 

 

[OSUblake 13,904 Likes (Superhero)]

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());

 

[rgfx 37 Likes (Newbie)]

@OSUblake Thank you very much, just what I was looking for.