投稿日:

GSAPで横に流れる文字を作る

いにしえのHTMLタグ「marquee」のように、横に流れる文字をGSAPを使って作ります。
GSAPとは、簡単にアニメーションを実装できるJavaScriptライブラリです。

GSAP

■完成物

See the Pen
GSAPで流れる文字 by matsu (@pochi__2828)
on CodePen.

■解説

ベースとなるHTMLには、無限ループにするためにテキストを2回記述する必要があります。
そのテキストをflexboxで横並びにし、片方をleftでイイ感じの位置にずらします。
GSAPの設定は以下の通り。

xPercent　→マイナス指定で左方向に移動
duration　→動作時間
repeat　→-1で無限リピート
ease　→移動以外の動きは不要なのでnone

jQuery不要で簡単に動きを付けることができるので、GSAPは覚えていて損はないですね。