Jump to content
Search Community

Tweening with a for loop?

wave test
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?

Link to comment
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

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

 

  • Like 3
Link to comment
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
			});
		}

 

  • Like 1
Link to comment
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");
}
Link to comment
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.

  • Like 1
Link to comment
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");
});
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...