用途
新着
履歴
分類


GSAP アニメーションライブラリ入門

GSAP アニメーションライブラリ入門
GSAP アニメーションライブラリ入門
アニメーションライブラリのGSAPを使った初めての方向けのサンプルです。

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>

本家のサイトはこちらです。

https://greensock.com/gsap/

公開 2021-06-04 00:14:00
更新 2021-06-04 00:33:25
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2021 kipure
Top