Jump to content
Search Community

Loops and arrays in TweenMax?

Annika test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey everyone,

I am working on a project for university and there is one thing in p5js where I don't know how to do it.

 

I want to move two rectangles from the same place to two different places. (Because I like to move later lots of rectangles I want to create a loop and put the x and y values in a array.

 

Thank you

Annika

 

This is my js-code in p5js:

 

var demos = {x:300, y:-30};
var placeX = [0,200];
var placeY = [10,300];
var i = 0;

function setup() {
  createCanvas(400, 400);
 for(i=0; i<2;i++){
  var tween = new TweenMax(demos, 1, {x:placeX, y:placeY, ease:Power1.easeOut});
 }
 
 
}

function draw() {
  background(220);
 fill(200,20,150);
 noStroke();
 
 for(i=0; i<2;i++){
 rect(demos.x, demos.y, 30, 30);
 }
}

Link to comment
Share on other sites

Hi @Annika

 

Providing a simple demo is always the best way to get help, even if it doesn't work.

 

You only have 1 object, demos, but you need 2 objects. The best way to go about what you're doing is to create an array of objects.

 

You can add more animations later by adding another loop, but this should help you get started.

 

See the Pen eyRYKG?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

22 minutes ago, Sahil said:

Yup looks like I am on right track ;)

 


var box = boxes[i];

 

Why are you creating variable to copy object?  For performance or simplicity?

 

Yeah. It's faster, easier to read, and less error-prone. In the first loop it might seem pointless, until you want to add another tween and have to type boxes again. In the second loop, it's more apparent. 

 

// harder to read, and easier to make a mistake
for (var i = 0; i < boxes.length; i++) {    
  rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
}

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

 

7 hours ago, Sahil said:

 


var box = boxes[i];

 

Why are you creating variable to copy object?  

 

 

BTW, there is only 1 box variable, and it's not copying the object.  You can copy the value of a primitive (string, number, boolean, null, undefined, symbol).

 

// Copies value
var foo = "eggs";
var bar = foo; 
foo = "ham";

console.log(foo); // "ham"
console.log(bar); // "eggs"

 

For everything else, it's not that straightforward. Try searching for pass by value and by reference as it can be hard to explain.

 

Variables do not store the value of an object, they just hold a reference to an object's location in memory, kind of like a home address. And just like your home address, it can be passed around and be used by more than 1 person.

 

Notice how alpha and bravo appear to have the same value, but they are not equal. On the other hand, alpha and charlie are equal even though I changed the value of the msg property. That's because they are pointing to the same object.

 

var alpha = { msg: "Hello World!" };
var bravo = { msg: "Hello World!" };

console.log(alpha === bravo); // false

// Copies reference
var charlie = alpha;
charlie.msg = 123;

console.log(alpha === charlie); // true

console.log(alpha.msg); // 123
console.log(charlie.msg); // 123

 

 

And about there only being 1 box variable, that's because of something called hoisting. There is no difference between these two loops. All var declarations are moved to the top of their scope by the JavaScript compiler, so the first loop will end up looking just like the second loop.

 

for (var i = 0; i < 2; i++) {
  var box = boxes[i];
}

 

var box;

for (var i = 0; i < 2; i++) {
  box = boxes[i];
}

 

That's why this crazy looking code is totally valid. The num variable gets moved to the top.

 

num = 8;
num += 4;
var num;
console.log(num); // => 12

 

  • Like 5
Link to comment
Share on other sites

Hey thank you for your help!

 

I was working on it and I got a new question. I want to animate text with little quares and therfore I think I need an array for every letter (little quares in it) and then another array with the letters. I've tried it  often but I don't know how to connect the arrays.

 

Or is there an easier way to animate them with functions or something else because I also want to move the letters later.

 

Annika

 

 

See the Pen mpMPeR by Annievie (@Annievie) on CodePen

 

Link to comment
Share on other sites

  • 1 year later...

Hi Annika,

 

Yes, you can use functions to create your Tweens or timelines easily.

 

// If you create a function that will take the inputs you might want to change
function createTween(element, vars) {
  TweenMax(element, vars.duration, {
    x: vars.x,
    y: vars.y,
    ease: Power1.easeOut
  });
}

// Then in your loop you could do something like:
for (i = 0; i < targets.length; i++) {
  demos.push({ x: 0, y: 0 });
  createTween(demos[i], { duration: targets[i].s, x: targets[i].x, y: targets[i].y });
}

 

  • Like 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...