# Tweening with a for loop?

Moderator Tag

## Recommended Posts

Hi,

I have a set of objects i want to tween in a similar way. I have given them names like obj1 obj 2, ob3 obj4. There might be more than that.

So I want to be able to say something like:

```var i;
var xDist = 100;

for (i = 0; i = 4; i++) {

gsap.to(obj(???), {
duration: 1,
x:xDist
});

xDist+=100;

}```

I don't know how to deal with the code for

gsap.to(obj(???)

Is there a way I could write this so it applies the tween to all 4 of my objects?

##### Share on other sites

That's an infinite loop. More like.

```var myObjects = [obj1, obj2, obj3, obj4];

// for loop
for (var i = 0; i < myObjects.length; i++) {
gsap.to(myObjects[i], {});
}

// for each loop
myObjects.forEach((obj, i) => {
gsap.to(obj, {});
});```

See how to do some loops

But you really don't need a loop with gsap's function syntax. It does a loop for you.

```var myObjects = [obj1, obj2, obj3, obj4];
var xDist = 100;

gsap.to(myObjects, {
x: i => xDist + i * xDist,
duration: 1
});```

• 3
##### Share on other sites

Thanks - since asking the question I found a different way that seems to work, but your version looks better. Here's my one:

```for (i = 1; i < 5; i++) {
TweenMax.set(page1["hotSpot" + i], {
alpha: 0.2
});
}```

• 1
##### Share on other sites

• 8 months later...
On 3/5/2020 at 1:58 PM, OSUblake said:

But you really don't need a loop with gsap's function syntax. It does a loop for you.

can i hook into this question please? at the moment my working code is the following. is there potential to optimize it the gsap way? i have no jquery loaded:

```var \$products = document.querySelectorAll('.product');
for (var i = 0; i < \$products.length; i++) {
tl1.from(\$products[i], 1, {
opacity: 0,
x: "-=30"
});
tl1.to(\$products[i], 1, {
opacity: 0,
x: "+=30"
},"+=1");
}```
##### Share on other sites

1 hour ago, nicmare said:

is there potential to optimize it the gsap way?

What do you mean by "optimize it"? Performance wise what you have is fine. Developer usability wise it's also fine but I'd follow a couple developer conventions which I would argue improves your code cleanliness:

```// Use ES6 if you can; don't use \$ in variable name
const products = gsap.utils.toArray('.product'); // Convert to array for easier processing
products.forEach((product, i) => { // Use forEach
tl1 // I prefer chaining when adding to the same timeline
.from(product, {
duration: 1, // Include the duration in the vars parameter
opacity: 0,
x: "-=30"
})
.to(product, {
duration: 1,
opacity: 0,
x: "+=30"
}, "+=1");
});```

But it also depends on your team's agreed upon conventions.

• 1
##### Share on other sites

6 minutes ago, ZachSaucier said:

What do you mean by "optimize it"? Performance wise what you have is fine. Developer usability wise it's also fine but I'd follow a couple developer conventions which I would argue improves your code cleanliness:

```
// Use ES6 if you can; don't use \$ in variable name
const products = gsap.utils.toArray('.product'); // Convert to array for easier processing
products.forEach((product, i) => { // Use forEach
tl1 // I prefer chaining when adding to the same timeline
.from(product, {
duration: 1, // Include the duration in the vars parameter
opacity: 0,
x: "-=30"
})
.to(product, {
duration: 1,
opacity: 0,
x: "+=30"
},"+=1");
});```

But it also depends on your team's agreed upon conventions.

nice one! thats what i am talking about. thank you! and when i have a child element "div.img" i would do the following (which currently works):

```const products = gsap.utils.toArray('.product');
products.forEach((product, i) => {
tl1
.from(product, {
duration: 1,
opacity: 0,
x: "-=30"
})
.from(product.getElementsByClassName("img"), {
duration: 1,
opacity: 0,
scale: 0.5
})
.to(product, {
duration: 1,
opacity: 0,
x: "+=30"
},"+=1");
});```
##### Share on other sites

27 minutes ago, nicmare said:

i would do the following

Ya, that's fine. Though .querySelector("img") is the more modern way of doing things. You might also save it to a variable before the tween depending on your teams standards.

## Create an account

Register a new account