ページ遷移時のトランジション方法の紹介
こんにちわ。nap5です。
ページ遷移時のトランジション方法の一つを紹介したいと思います。
デモコードをcodesanboxに置きました。
デモではフォントを少し変えているのですが、codesandbox上だとフォントはプレビューに反映されないようです？
デモ動画はこちらです。
framer motionを使って実装しましたが、framer motionだとstaggerのリピートが難しく、ここら辺はgsapで持ち回ったほうがいいのかもしれません。（という気付きを得ました。）
clip-pathを使って折り畳み遷移も表現してみました。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？