Basically, what im trying to do is, that I have three cubes, and on each click they switch positions. This works fine when done once. Now, I added 3 Lines in the end of the function called "rotWorld" like this:
var i1 = i3;
var i2 = i1;
var i3 = i2;
but i get errors all the time. How can I define the switches positions as new initial positions, to that the next time I click on the trigger, the objects will move again, making a full circle at 3 clicks?
Heres a fiddle: https://jsfiddle.net/ung8qapd/1/
Okay, what you need to do here is to create the circle from 3 positions.
let counter = -1;
const positions = [
[5, 0, 5],
[0, 0, 5.66],
[-5, 0, 0]
];
const cubes = [i1, i2, i3];
With the counter, whenever you click on the button, the counter will increase and we will have something like:
and so on, you see, it loops, and [0, 1, 2] is the index of the position (x,y,z) that you will apply to the cube. On the 4th click when the counter is bigger than the total of positions, we set it back to the beginning.
This is the new rotWorld() function:
function rotWorld(){
console.log('--- rotate world');
// counter store the begin of position loop
counter++;
counter = counter < positions.length ? counter : 0;
// loop through each cube
cubes.forEach((cube, index) => {
// get the position base on the counter
const pos = (counter + index) % positions.length;
console.log(pos);
gsap.to(cube.position, {
duration: 1,
x: positions[pos][0],
y: positions[pos][1],
z: positions[pos][2],
});
});
}
I added some log in the console so you can test it out. You can also reverse the direction using the same logic. See Fiddle