Juc1 Posted November 28, 2022 Share Posted November 28, 2022 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 More sharing options...
Solution GreenSock Posted November 28, 2022 Solution Share Posted November 28, 2022 You mean like this?: See the Pen Yzvjrpz?editors=1010 by GreenSock (@GreenSock) on CodePen There are actually many ways to accomplish that. I just figured a .forEach() loop might be the most intuitive and flexible in this case. 2 Link to comment Share on other sites More sharing options...
Juc1 Posted November 28, 2022 Author Share Posted November 28, 2022 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 More sharing options...
Juc1 Posted November 29, 2022 Author Share Posted November 29, 2022 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 More sharing options...
mvaneijgen Posted November 29, 2022 Share Posted November 29, 2022 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! 1 Link to comment Share on other sites More sharing options...
Juc1 Posted November 29, 2022 Author Share Posted November 29, 2022 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 More sharing options...
GreenSock Posted November 30, 2022 Share Posted November 30, 2022 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 More sharing options...
Juc1 Posted November 30, 2022 Author Share Posted November 30, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now