Random Y or X direction not both in a stagger animation, so the animation only from top, right, bottom or left never diagonally.

[mvaneijgen]

How would you go about picking either X or Y in a stagger animation, but never both? Right now the animation will pick both a random direction for X and Y which result in the animation moving diagonally.

 

gsap.from(".item", {
  opacity: 0,
  yPercent: "random([-100, 100])", // OR
  xPercent: "random([-100, 100])", // Never both
  stagger: {
    each: 0.2
  }
});

 

I was thinking something like this, but that is not valid and I don't know how else to write it. 

gsap.from(".itemFN", {
  opacity: 0,
  function () {
    const randomXY = gsap.utils.radnom(["yPercent", "xPercent"]);
    const randomMove = gsap.utils.radnom([-100, 100]);
    return `${randomXY}: ${randomMove}`;
  },
  stagger: {
    each: 0.2
  }
});

 

See the Pen vYXOzPG by mvaneijgen (@mvaneijgen) on CodePen

Edited December 1, 2020 by mvaneijgen
Code highlighting, I forget that this form doesn't have markdown support.

[ZachSaucier]

Hey mvaneijgen. In situations like this the best solution is to probably use a loop and a master timeline instead of using GSAP's staggers. GSAP's staggers are not intended to be used in this way with some properties being optional in some of the staggered tweens.

[mvaneijgen]

@ZachSaucier thanks for the reply, is there a better way to get this to work? It seem overly complicated for just a simple effect. 

 

In CSS you have the property `translate` which takes two parameters for x and y, it seems that GSAP only has `translateX` and `translateY`, because if I just have translate I can feed it two values like so `100, 0` or `0, 100` to get the same effect

 

See the Pen RwGWomx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[mikel]

Hey @mvaneijgen,

 

I am not sure what you mean exactly.
Here's an option as I understand it.

 

See the Pen rNMOyZr?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[ZachSaucier]

4 hours ago, mvaneijgen said:

it seems that GSAP only has `translateX` and `translateY`

GSAP recommends the shorthand x and y to affect the translateX and translateY. I'm not really following what you're trying to do with the latest demo you posted.

 

Here's another way of doing what mikel is doing:

See the Pen WNGQZMK?editors=0010 by GreenSock (@GreenSock) on CodePen

[mvaneijgen]

@ZachSaucier that was more in line what I was looking for.

 

But instead of getting the index from the for each I can just get it from the current stagger

 

Quote

staggers are not intended to be used in this way with some properties being optional in some of the staggered tweens

 

I see what you mean now, but setting a value to 0 (zero) means they  kinda become optional

 

gsap.from(".item", {
  opacity: 0,
  yPercent: i => i % 2 === 0 ? 0 : gsap.utils.random([100, -100]), 
  xPercent: i => i % 2 === 0 ? gsap.utils.random([100, -100]) : 0, 
  stagger: 0.3,
});

See the Pen QWKjRPJ by mvaneijgen (@mvaneijgen) on CodePen