もう4ヶ月程前になるのですが、弊社の「Sylphina」というAmazon Connectを拡張したサービスが5/1に大幅なアップデートをリリースしました。
その際にランディングページ制作に携わらせていただき、ページをスクロールするとふわっとコンテンツが表示されるような簡単なアニメーションを導入したのですがブログにできていなかったなと思い今回はReact製のWebページにアニメーションを追加する方法について解説していきたいと思います。
はじめに
使うライブラリの紹介をします。
アニメーションの実装にframer motion
Intersection Observer APIにreact-intersection-observer
を使用します。
|
1 2 |
$ yarn add framer-motion $ yarn add react-intersection-observer |
とターミナルで打ってインストールしてください。
なお、本記事ではライブラリのバージョン等はNodeのバージョンが18.15.0、Reactが18.2.0、Framer motionが10.16.4のバージョンを使用しています。
framer motionの基本の使い方
framer motionではmotionコンポーネントとanimateプロパティを使ってアニメーションを実装します。
上のようにanimate={{ x: 100 }}とするとその要素をx軸上に100pxだけ動かすことができます。
useAnimationの使い方
次にuseAnimationを使用するとアニメーションをよりコントロールする事ができます。
このように書くとボタン押下時にアニメーションを発火させるように実装する事ができます。
描画に合わせてアニメーションを発火する方法
最後に、react-intersection-observerのuseInViewで画面に入ったらアニメーションを発火させるよう実装します。
まとめ
このようにFramer -motionを使うと簡単にアニメーションをアプリに組み込む事ができます。
他にも色々なアニメーションがあるので公式サイトを参考にみなさんも是非試してみてください。
The following two tabs change content below.
- AWSから公開されたJavaScriptランタイム「LLRT」を使ったLambdaをAWS CDKで構築する方法 - 2024-02-19
- 【Bun】JavaScriptでシェルスクリプトを書けると噂のBun Shell使ってみた - 2024-02-08
- 【Next.js】Next.js 14をAmplify V6でデプロイ・ホスティングする方法【Amplify】 - 2024-02-06
- JavaScript最新の動向【JavaScript Rising Stars2023】 - 2024-02-01
- AmplifyでAPI GatewayのLambda Authorizerを設定し認可を実装する方法 - 2023-12-15
【採用情報】一緒に働く仲間を募集しています
