gsapライブラリを使って進捗率がトランジションするローディングアニメーションを作ってみた

こんにちわ。nap5です。

gsapライブラリを使って進捗率がトランジションするローディングアニメーションを作ってみたので、紹介したいと思います。

Twiiterにも投稿してみました。

I mocked this transitive number animation using gsap.#react #javascript #gsap #100DaysOfCode

demo codehttps://t.co/BGbONdLcaL

demo sitehttps://t.co/sjxXHmpaBc

— nap5 (@napzak5) July 28, 2022

gsapライブラリはこちらになります。

GreenSock

デモサイトです。

Vite App

デモコードです。

nostalgic-feather-wnnn4r - CodeSandbox

フォント何を使うかによってサイズがずれたりするので、その都度微調整が必要になりますが（それが大変）、それっぽいUIにはなったのではと思います。

完了通知用のコールバックをコンポーネントの引数に渡して、アニメーション完了通知を受け取れるようにするのが、ポイントです。

  const handleNotifier = useCallback((e) => {
    console.log(e);
    // https://greensock.com/docs/v2/Easing
    gsap.to(transitiveNumberRef.current, {
      duration: 1.2,
      left: '-100%',
      ease: Power3.easeInOut,
    });
  }, []);

完了通知を受け取ったあとは、メインコンテンツを表示していけばいいと思います。

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

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

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

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

簡単ですが、以上です。