見出し画像

react-springを使ったgsapライクなstaggerアニメーションの紹介

こんにちわ。nap5です。


今回はreact-springを使ったgsapライクなstaggerアニメーションの一つを紹介したいと思います。



glitchでホスティングしています。

デモサイトへのリンクです。


デモコードへのリンクです。


デモ動画へのリンクです。


コードも公開しているので、細かいのはそちらを見ていただくことにして、ポイントとなる点を抜粋します。

以下のフックの部分です。keyプロパティを指定しないとトランジションをしてくれないので、注意が必要です。DOMの一意性を担保してスタイリングのトランジションを実行するためです。

const transitions = useTransition(grid.itemList, {
    key: (item) => {
      return item.color;
    },
    from: ({ x, y, width, height }) => {
      return {
        x,
        y,
        width,
        height,
        opacity: 0,
      };
    },
    enter: ({ x, y, width, height }) => {
      return {
        x,
        y,
        width,
        height,
        opacity: 1,
      };
    },
    update: ({ x, y, width, height }) => {
      return {
        x,
        y,
        width,
        height,
      };
    },
    leave: { height: 0, opacity: 0 },
    config: { mass: 1, tension: 50, friction: 1, frequency: 1, duration: 500 },
    trail: 25,
  });


最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。


最後に、Udemyでコースを公開しました。

今週末まで無料のクーポンを発行しています。
良かったら覗いてみてください。

5/11から5/16まで有効な無料クーポンリンクです。1000名まで。
クーポンコードは 549B7E5B0F667897FDEB です。

こちらが無料クーポンのリンクになります。


また、コースの内容紹介記事は以下になります。


簡単ですが、以上です。


この記事が気に入ったらサポートをしてみませんか?