search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

GSAP #147

Open hysryt opened 4 years ago

hysryt commented 4 years ago

GreenSock Animation Platform https://greensock.com/

hysryt commented 4 years ago

ライセンス

https://greensock.com/licensing/

以下のケースに該当する場合はビジネスライセンスが必要

hysryt commented 4 years ago

概要

GSAPで行えることは大雑把に言って以下の2つ。

Tween

to, from, fromTo を使用する。

const obj = {
  x: 10,
};

gsap.to(obj, {
  x: 20,
  onUpdate: () => console.log(obj.x),
});

Timeline

Tweenの発火タイミングを管理する。 入れ子にすることも可能なので、他のTimelineの発火も管理できる。

Timelineに追加したTweenは順番に発火する。 デフォルトでは前のTweenが終わり次第、次のTweenが発火する。

const obj = {
  x: 10,
  y: 10,
}

const tl = gsap.timeline();

tl.to(obj, {
  x: 20,
  onUpdate: () => console.log(`x: ${obj.x}`),
});

tl.to(obj, {
  y: 20,
  onUpdate: () => console.log(`y: ${obj.y}`),
});
hysryt commented 4 years ago

DOM のアニメーション

コアに含まれるCSSプラグインでDOM要素のアニメーションが可能

gsap.to('.box', {
  duration: 1, // 1秒
  x: 200,  // transformX
});
var box = document.querySelector('.box');
gsap.to(box,  {
  duration: 1, // 1秒
  x: 200,  // transformX
});
hysryt commented 4 years ago

Tween

stagger

スタッガーと読む。 対象のアニメーション要素が複数ある場合、それぞれに遅延を持たせることができる。

gsap.to('.box', {
  x: 100,
  stagger: 0.1,
});

例えば .box が3つある場合、まず最初の要素がアニメーションし、0.1秒後に2番目の要素、0.2秒後に3番目の要素がアニメーションする。

stagger にオブジェクトを入れることで詳細な設定も可能。

gsap.to('.box', {
  x: 100,
  stagger: {
    amount: 1,
    grid: [3,3],
    from: 'center',
    axis: 'x',
    ease: 'power2.in',
  }
});