TweenMax を使ったサンプルページ001

TweenMax について

HTML要素に対してアニメーションすることができる(Canvasは使わない)。

参考

TweenMax

TweenMax.to()

特定の目的となる値に向かってアニメーションする TweenMax インスタンスを作成する静的メソッド

ref. GreenSock | Docs | TweenMax | static.to()

時計回り反時計回り

Code:

const rd = $('input[name="rotateDirection1"]:checked').val();
TweenMax.to('#box1', 2, {
  startAt: { rotation: 0 }, // 何度も実行するために必要
  left: 400,
  rotation: (rd === '1') ? '360_cw' : '360_ccw',
  ease: Bounce.easeOut
});

Code:

TweenMax.to('#box2', 1, {
  x: 500,
  opacity: 0,
  startAt: {
    x: 0,
    opacity: 1
  }, // 何度も実行するために必要
});

メモ

動作が終わると、元には戻らない。
startAtで指定するのは、あくまで 動作の開始時点 のプロパティである。

TweenMax.set()

目的のオブジェクトのプロパティを直ちにセットする。

TweenMax.to() の前で使うとよさそう。

ref. GreenSock | Docs | TweenMax | static.set()

Code:

TweenMax.set('#box3', {
  x: 200,
  opacity: .5
});

TweenMax.from()

特定の値から初期値に向かってアニメーションする TweenMax インスタンスを作成する静的メソッド

ref. GreenSock | Docs | TweenMax | static.from()

Code:

TweenMax.from('#box4', 1, {
  x: 500
});

TweenMax.fromTo()

特定の値から特定の値に向かってアニメーションする TweenMax インスタンスを作成する静的メソッド

ref. GreenSock | Docs | TweenMax | static.fromTo()

Code:

TweenMax.fromTo('#box5', 1, {
  width: '100%',
  x: 500
}, {
  width: 100,
  x: 0
});

TweenMax.staggerTo()

ターゲットとなる複数のオブジェクトに対して、共通の目的値に向かってアニメーションする。

ref. GreenSock | Docs | TweenMax | static.staggerTo()

Code:

TweenMax.staggerTo(".box6", 1, {
  rotation: '+=360',
  x: '+=100'
}, 0.5);

TimelineMax

その1

Code:

const elm = document.querySelector('#box7');
(new TimelineMax())
  .to(elm, 1, { x:  200, backgroundColor: 'black', opacity: .5 })
  .to(elm, 2, { y: -200, backgroundColor: 'blue',  opacity: 1  })
  .to(elm, 1, { x:    0, backgroundColor: 'red',   opacity: .5 })
  .to(elm, 2, { y:    0, backgroundColor: 'green', opacity: 1  });