Tweening with a for loop?

[wave 5 Likes (Newbie)]

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?

[OSUblake 18,538 Likes (Superhero)]

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

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

 

[wave 5 Likes (Newbie)]

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

 

[nicmare 5 Likes (Newbie)]

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");
}

[ZachSaucier 7,162 Likes (Superhero)]

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.

[nicmare 5 Likes (Newbie)]

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");
});

[ZachSaucier 7,162 Likes (Superhero)]

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.