GSAPで円弧のアニメーション描いてみたよ

アバター画像 adachi

0

こんにちは!
KNAP足立です!
最近アニメーション作成でGSAP触れる機会が増えてきて、
ちょっとデモ作成してみたのでブログ書いてみようって思いました!

ってことで今回は円弧のアニメーションっす🙋‍♂️
デモはこちら〜

See the Pen GSAP_anime_01 by knap_develp (@knap_develp) on CodePen.

やってること

並びあわせた大きさの違う2つの円(js-circleとjs-circle_content)の間に、
円の左端に設置した白いbox(js-circle_border_02)を回転させて、
さらに途中で青色に色を変更させることで
弧を描いてるように見えるアニメーションを作ってます
(青いボックス(js-circle_border_02)はそのまま置きっぱなし)

アニメーションってイージング変えるだけでも
与える印象変わってくるので奥が深いですよね☺️
引き続きアニメーション勉強していこうと思います!

では今日はこのへんで〜👋

アバター画像

ぽちっとおうえん!

シェア

  • Facebook
  • LINE
  • X
削除と戻るボタンを設置する 複数の長方形を描いて動かせるようにする