GSAPというメジャーでかなり機能が充実したアニメーションライブラリの導入のサンプルです。
処理も軽く、読み込みの早い、高機能なライブラリです。
以下は、ボタンをクリックして、要素のアニメーションをコントロールするシンプルなデモです。
まずGSAPを読み込む
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
JSはシンプル
var tween = gsap.to(".demo_green", { duration: 4, x: 300, rotation: 360, ease: "none", paused: true }); // click handlers for controlling the tween instance... document.querySelector("#play").onclick = () => tween.play(); document.querySelector("#pause").onclick = () => tween.pause(); document.querySelector("#resume").onclick = () => tween.resume(); document.querySelector("#reverse").onclick = () => tween.reverse(); document.querySelector("#restart").onclick = () => tween.restart();
HTMLもこれだけ
<div class="demo_box demo_green"></div>
本家のサイトはこちらです。