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>
本家のサイトはこちらです。
