gsapライブラリを使って進捗率がトランジションするローディングアニメーションを作ってみた
こんにちわ。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/
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。