ゆらゆらさせてから自然に止めるアニメーション【CSS, JS】

要素をゆらゆらさせるアニメーションを試してみたTipsを紹介します。

ゆらゆらさせるアニメーション【CSS】

ずっとゆらゆらさせるアニメーションは、CSSのKeyFramesだけでそれらしくなります。

アニメーションさせる時にease-in-outのイージングを指定します。

css

.star {
  width: 200px;
  transform-origin: center top;
  animation: yurayura 2s ease-in-out infinite;
}

@keyframes yurayura {
  0% , 100% {
    transform: rotate(10deg);
  }
  50%{
    transform: rotate(-10deg);
  }
}

結構自然にゆらゆらしてくれます。

ゆらゆらしてから自然に停止する【GSAP】

風に揺られているように、ゆらゆらしてから自然に止めたい。

自然に止めるには、CSSだけではちょっと難しいと感じたので、GSAPのeasingを使用することにしました。

https://gsap.com/docs/v3/Eases/

使用するのは**elastic(弾性)**です。

この波形を使って自然に停止するように見せます。

js

const tl = gsap.timeline();
  tl
    // rotationを20へ
    .to('.star', {
      rotation: 20,
      duration: 0.8,
      ease: "power1.inOut",
    })
    // 徐々にrotationを0へ
    .to('.star', {
      rotation: 0,
      duration: 10,
      ease: "elastic.out(1, 0.2)",
    });

結構自然に停止してるように見えます。

elastic.out(1, 0.2)の第一引数を大きくすることで振幅を大きく、第二引数を大きくすることで波長を長くすることができます。