becolomochi

<p>参考</p>
<ul>
<li><a href="https://greensock.com/gsap/" target="_blank" rel="nofollow noopener noreferrer">GSAP - GreenSock</a></li>
<li><a href="https://github.com/greensock/GSAP" target="_blank" rel="nofollow noopener noreferrer">GitHub - greensock/GSAP: GreenSock's GSAP JavaScript animation library (including Draggable).</a></li>
<li><a href="https://ics.media/entry/220822/" target="_blank" rel="nofollow noopener noreferrer">GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA</a></li>
<li><a href="https://ics.media/entry/220825/" target="_blank" rel="nofollow noopener noreferrer">GSAP入門（後編） - タイムライン制御やスクロール演出などの魅力的なJSライブラリ - ICS MEDIA</a></li>
</ul>


<p>つくってみた<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__12df65717fd3d" src="https://embed.zenn.studio/card#zenn-embedded__12df65717fd3d" data-content="https%3A%2F%2Fcodepen.io%2Fbecolomochi%2Fpen%2FQWxbPdy" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://codepen.io/becolomochi/pen/QWxbPdy" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://codepen.io/becolomochi/pen/QWxbPdy</a></p>


<h2 id="gsap%E3%81%AE%E6%A9%9F%E8%83%BD">
<a class="header-anchor-link" href="#gsap%E3%81%AE%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> GSAPの機能</h2>
<ul>
<li>トゥイーン</li>
<li>リピートの制御</li>
<li>変形や回転（Transform）</li>
<li>透明度（Opacity）</li>
<li>イージング</li>
<li>ばらつきのある動き（Stagger）</li>
<li>タイムライン</li>
<li>Scroll Trigger</li>
<li>曲線状に動かす</li>
<li>マウスストーカー</li>
</ul>
<h2 id="%E9%96%A2%E9%80%A3%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA">
<a class="header-anchor-link" href="#%E9%96%A2%E9%80%A3%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" aria-hidden="true"></a> 関連ライブラリ</h2>
<ul>
<li>PixiJS</li>
<li>Three.js</li>
</ul>
