【TweenMax入門】基本的な使い方

高機能アニメーションライブラリTweenMaxの基本的な使い方を紹介。

というか自分へのメモ。

なんとなく簡単さの雰囲気は伝わると思います。

 

1. 読み込み

CDNが一番簡単。

<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js”></script>

 

htmlの適当な位置で上記scriptタグを読み込みましょう。

読み込んだら使うだけ

2. TweenMaxの関数達

基本的には次の関数を使います。

TweenMax.to(<対象の要素> , <アニメーション秒数> , <アニメーション終了時プロパティ>);

TweenMax.fromTo(<対象の要素> , <アニメーション秒数> , <アニメーション開始時プロパティ>,<アニメーション終了時プロパティ>);

TweenMax.set(<対象の要素> , <プロパティ>);

TweenMax.staggerTo(<対象の要素たち> , <アニメーション秒数> , <プロパティ> , <各要素のアニメ開始タイミングのズレ(秒)>);

TweenMax.staggerFromTo(<対象の要素たち> , <アニメーション秒数> ,<アニメーション開始時プロパティ>,<アニメーション終了時プロパティ> , <各要素のアニメ開始タイミングのズレ(秒)>);

これだけ使えればok。特にTweenMax.to, TweenMax.fromTo, TweenMax.staggerTo, TweenMax.staggerFromToが強力。

他にもpause()とかまあいろいろありますが、とりあえずこれだけでも楽しい。

各引数の詳細、とくに要素とプロパティはこんな感じで指定できる。

  • <対象の要素>:
    • セレクタかオブジェクト、jQueryオブジェクトもいける
  • <プロパティ>
    • CSSのプロパティ + α
      • left: “100px”
      • left: “+=100px”
      • backgroundColor (ハイフンで繋がるスタイル名はキャメルで指定)
      • x: 10 (transformはこんな感じ)
      • y: 10 (transformはこんな感じ)
    • コールバックファンクション
      • onComplete : function(){}:終了時
      • onStart  : function() {}:開始時
      • onUpdate : function() {}:アニメーション最中時
    • イージング
    • ディレイ
      • delay: 1

3. 具体例(TweenMax.to, fromTo)

 

See the Pen BQQPRZ by suzuki (@suzukidayo) on CodePen.


こんな感じ。

次回はタイムラインについて簡単に書こうかと思います。

タイムラインを使うと、チェーンメソッドのように連続したアニメーションを簡単に定義できるので、表現の幅がぐっと広がります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です