correct syntax for returning x increment in cycle ?

[ninmorfeo 6 Likes (Newbie)]

What is the correct syntax for returning to the function the x increment of 40px instead of the absolute position?

 

in the example below,  the "+ =" and the "- =" are not read and the objects move to x = 40

 

 .staggerTo(chi, 0.5, {
                cycle: {
                    rotationY: ["-=20","+=20"],
                    x: function () {
                        var xpos=["-=40","+=40"];
                       /* xpos="+="+xpos*/
                        return xpos
                    }
                },
                 rotationX: 0,  
                ease:  Power4.easeOut       
            }, 0)

thanks
          

See the Pen MMojOx by Ninmorfeo (@Ninmorfeo) on CodePen

[ZachSaucier 467 Likes (Leader)]

Hey ninmorfeo,

 

I'm not quite understanding what you're trying to do here. Let me explain what I see happening:

 

xpos = "+=" + xpos

 

You're setting the variable xpos equal to a string because the + concatenates the variable xpos at the end to it. So you will likely end up with something like this: "+=-100,200". I don't think that's what you want.

 

However, since xpos is originally an array, I'm not understanding what you're wanting the += to do. An array += an array doesn't make much sense. Are you just trying to double each value in the array? Or just have each object use the value in the array that matches its index?

[ninmorfeo 6 Likes (Newbie)]

Obviously the code is wrong not knowing how to proceed.

 

My intent is to make sure that in the last stagger, the squares move by -40 pixels from the current x to the left ones and +40 px to the right ones. Currently, they move to the absolute x position of 40

[ZachSaucier 467 Likes (Leader)]

I see, thanks for clarifying.

 

You can pass an index into the x function like so:

 

x: function (index) {
  var xpos=[-40,40];
  return "+=" + xpos[index];
}

 

See the Pen jjwVQb?editors=0010 by ZachSaucier (@ZachSaucier) on CodePen

 

However, this does not effect all of the 12 boxes that you have. What are you wanting to do with the other 10 boxes that don't have an array value that matches up indexes with?

[ninmorfeo 6 Likes (Newbie)]

mmm in the example you posted I see that only 2 are moving, if I wanted others to move too?

[ZachSaucier 467 Likes (Leader)]

As I asked in the last post, I am not sure how you want to decide which elements to move based on the values in the array. If you wanted to have every other element move in the opposite direction you could do so using the following code: 

 

x: function (index) {
  var xpos=[-40,40];
  return "+=" + xpos[index % 2];
}

 

[ninmorfeo 6 Likes (Newbie)]

thank you very much, if I don't ask for too much I could know what exactly this istruction  does?
index% 2

[ZachSaucier 467 Likes (Leader)]

It's the remainder or modulo operator. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_() for more info.