コーディング

【GSAP】画面遷移時などに使用できるストライプアニメーション

  • このエントリーをはてなブックマークに追加

皆さん、こんにちは。

制作部の関です。

今回は「画面遷移時などに使用できるストライプアニメーション」についてのお話をします。

今回はとあるサイトで見たアニメーションを備忘録として残しておきます。

See the Pen
Untitled
by d-grip (@d-grip)
on CodePen.

ストライプで出てくるメニューは個人的には新鮮です。
アレンジして横から出てくるバージョンも作りました。

cssの.stripeの:nth-child(1)のgrid-row-start: 2のように子要素に順番を設定すれば
出てくる順番を変えることができますのでお好きなようにアレンジしてみてください!

See the Pen
stripe animation02
by d-grip (@d-grip)
on CodePen.

以上、制作部の関でした。

  • このエントリーをはてなブックマークに追加