もう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.
- 【Framer Motion】React製Webページにアニメーションをつけてみた - 2023-09-12
- 【AWS】AssumeRoleを使用しLambdaから別のAWSアカウント上のAmplify GraphQL APIを操作する方法【クロスアカウントアクセス】 - 2023-06-24
- [React/TypeScript]Material-UIを使ってアプリケーションのレイアウトを作成しよう - 2023-05-31
- [Amazon Connect]チャットチャンネルのコンタクトフローの作成方法 - 2023-04-19
【採用情報】一緒に働く仲間を募集しています
