Jump to content
Search Community

Run timeline for first instance of class X, then for next instance of class X etc

Juc1 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi all

 

in my codepen the timeline runs and reverses for all cases of ".newyork" at the same time. Instead of this can anyone please show me how to say run and reverse the timeline for just the first instance of ".newyork", then when that is done,  run and reverse the timeline for just the second instance of ".newyork" - and so on for each instance of ".newyork" ?

 

 

See the Pen ZERjyrY by Juc1 (@Juc1) on CodePen

Link to comment
Share on other sites

4 minutes ago, GreenSock said:

You mean like this?: 

There are actually many ways to accomplish that. I just figured a .forEach() loop might be the most intuitive and flexible in this case. 

 

Yes perfect thank you. 😀

Link to comment
Share on other sites

12 hours ago, GreenSock said:

You mean like this?: 

There are actually many ways to accomplish that. I just figured a .forEach() loop might be the most intuitive and flexible in this case. 

 

A question please about your codepen

 

newyork.forEach((el, i) => {

Is the second parameter i needed - what work is it doing? It seems to work fine without the second parameter = 

See the Pen BaVPqew by Juc1 (@Juc1) on CodePen

 

Link to comment
Share on other sites

The first parameter is the element, the second parameter is the index of that particular element, this gets usually shortened to because i is faster to type than index. You can surely leave it out if you don't need it. There is even a third parameter, check out the MDN docs to learn more about the .forEach function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

Hope it helps and happy tweening! 

  • Like 1
Link to comment
Share on other sites

2 hours ago, mvaneijgen said:

The first parameter is the element, the second parameter is the index of that particular element, this gets usually shortened to because i is faster to type than index. You can surely leave it out if you don't need it. There is even a third parameter, check out the MDN docs to learn more about the .forEach function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

Hope it helps and happy tweening! 

 

Ok thanks I was just wondering if the index parameter was needed / doing anything in Jack's codepen. If anyone knows a gsap foreach codepen which uses the index parameter please tell me because I would be interested to see what it can do 😀

Link to comment
Share on other sites

It's just a convention. @mvaneijgen linked to the docs that explain what that parameter does. It's totally unrelated to GSAP - it's just the index value of the current loop. So it starts at 0, then 1, then 2, etc. 

So yes, you could totally tap into that in order to place things into a timeline, for example: 

let tl = gsap.timeline();
myArray.forEach((el, i) => {
  tl.to(el, {...}, i * 2); // insert each one 2 seconds apart
});

Technically that could be done using the "stagger" feature in many cases, but sometimes it is useful in a forEach() loop for more complex logic. 

Link to comment
Share on other sites

7 hours ago, GreenSock said:

It's just a convention. @mvaneijgen linked to the docs that explain what that parameter does. It's totally unrelated to GSAP - it's just the index value of the current loop. So it starts at 0, then 1, then 2, etc. 

So yes, you could totally tap into that in order to place things into a timeline, for example: 

let tl = gsap.timeline();
myArray.forEach((el, i) => {
  tl.to(el, {...}, i * 2); // insert each one 2 seconds apart
});

Technically that could be done using the "stagger" feature in many cases, but sometimes it is useful in a forEach() loop for more complex logic. 

 

ok great thank you 😀

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