gsapでrandomにx軸やy軸に要素を移動させる方法

2021年8月17日gsap

gsapでrandomにx軸やy軸に要素を移動させる方法を紹介します。

デモ

See the Pen
gsap random by Sosak (@Sosak2021)
on CodePen.

gsapでrandomにx軸やy軸に要素を移動させる方法

gsap.to('.btn', {
  duration: 1,
  stagger: 0.3,
  x: 100,
})

上のように指定しれば、x軸には100pxだけ移動します。
これが通常のやり方で、このx軸の数値をランダムに指定する方法を紹介します。

ランダムに指定したい場合

gsap.to('.btn', {
  duration: 1,
  stagger: 0.3,
  x: "random(-100, 100)"
})

上のように指定すれば、-100pxから100pxの間をランダムに指定することができます。

これは小数点以下もランダムになるので、たとえば十の位まで四捨五入したい場合は、次のように指定します。

切りの良い数値のみでランダムにしたい場合

gsap.to('.btn', {
  duration: 1,
  stagger: 0.3,
  x: "random(-100, 100, 10)" //10なら十の位でラウンドした結果になる
})

この10という数字がラウンドしたい数値です。

特定の数値のみでランダムに指定したい場合

gsap.to('.btn', {
  duration: 1,
  stagger: 0.3,
  x: "random([20, 30, 50, 80, 90])"
})

特定の数値のみでランダムに指定したい場合は、配列にして指定することができます。