Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

correct syntax for returning x increment in cycle ?

Recommended Posts

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)


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

Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

mmm in the example you posted I see that only 2 are moving, if I wanted others to move too?
Link to comment
Share on other sites

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];


  • Like 3
Link to comment
Share on other sites

thank you very much, if I don't ask for too much I could know what exactly this istruction  does?
index% 2
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.