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

こんにちわ。nap5です。

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

react-spring

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

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

Hello React!

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

Glitch Code Editor ･ﾟ✧

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

Loom | Send a video. Not a thousand words.

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

以下のフックの部分です。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でモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

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

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

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

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

FaunaDBを使用したRSSキュレーションミニシステムの構築

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

簡単ですが、以上です。