Looping through an array of elements to create timeline... am i doing it right?

[navug]

I'm trying to loop through an array of elements (it could be images or paragraphs) and create the same tween for each one of them. But i wanna do it the right way (the efficient, readable and clean way)

 

In this article (https://css-tricks.com/tips-for-writing-animation-code-efficiently/) the author does some loops examples in tip #7 but he doesn't add all the tweens in a single timeline…

 

So, i’m wondering if this is the way to do it?

function createTween(element) {
 return gsap.from(element,{
  //animations
 })
}

function createTimeline() {
 const images = document.querySelectorAll("img");
 const tl = gsap.timeline();

  [...images].forEach(element => {
    tl.add(createTween(element))
  })
  
 return tl;
}

createTimeline()

 

thanks in advance

[OSUblake]

Welcome to the forums @navug

 

3 hours ago, navug said:

But i wanna do it the right way (the efficient, readable and clean way)

 

There is no right way. That's something you'll figure out over time as every situation is unique. What works well in one case may not work that well in another. 😉

 

And your code looks fine. If you wanted, you could shorten it a bit with GSAP's toArray utility.

https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()

 

function createTimeline() {
 const tl = gsap.timeline();

  gsap.utils.toArray("img").forEach(element => {
    tl.add(createTween(element))
  });
  
 return tl;
}