FramermotionのuseTransformを使ってカスタムイージングをアタッチさせながら動きに変化を付けてみよう

こんにちわ。nap5です。FramermotionのuseTransformを使ってカスタムイージングをアタッチさせながら動きに変化を付けてみたので、紹介したいと思います。

イージングのカスタマイズに関しては以下のライブラリを使用しています。

GitHub - gre/bezier-easing: cubic-bezier implementation for your JavaScript animation easings – MIT License

デモサイトです。

Have a nice day

デモコードです。

eager-grass-oh8prk - CodeSandbox

ポイントとしては以下のようにイージング関数を作成して

const doEaseOutQuart = (x) => {
  // https://easings.net/#easeOutQuart
  return easing(0.25, 1, 0.5, 1)(x);
};

const doEaseOutElastic = (x) => {
  // https://easings.net/#easeOutElastic
  const c4 = (2 * Math.PI) / 3;

  return x === 0
    ? 0
    : x === 1
    ? 1
    : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
};

useTransformのeaseオプションに指定してやると動いてくれます。

  const { scrollYProgress } = useScroll();
  const opacity = useTransform(
    scrollYProgress,
    [0, 0.3, 0.9, 1],
    [0, 1, 1, 0],
    { ease: doEaseOutQuart }
  );
  const x = useTransform(scrollYProgress, [0, 0.3, 0.9, 1], [-30, 0, 0, -30], {
    ease: doEaseOutQuart,
  });
  const y = useTransform(scrollYProgress, [0, 0.3, 0.9, 1], [70, 0, 0, 70], {
    ease: doEaseOutExpo,
  });

補完値をコールバックで受け取れるので、イージング一覧を見ながらいろいろ試してみると面白いかもしれません。

今回はベーシックなデモを作ってみました。

上記デモは左右に配置したものですが、上下に配置したものはこちらになります。

デモサイトです。

Have a nice day

デモコードです。

https://codesandbox.io/s/61jpo6

簡単ですが、以上です。