見出し画像

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

nap5

こんにちわ。nap5です。



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


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


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


デモサイトです。


デモコードです。


フォント何を使うかによってサイズがずれたりするので、その都度微調整が必要になりますが（それが大変）、それっぽい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でモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。


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

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


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

簡単ですが、以上です。

いいなと思ったら応援しよう！