from・to・fromTo

動きのどちら側を指定するかによってメソッドを使い分けます。

このLessonのゴール

• to、from、fromToの違いを説明できる

• 要素の移動、透明度、拡大率をTweenで指定できる

• 作りたい演出に合わせて適切なメソッドを選べる

• to: 現在値から終了値へ

• from: 開始値から現在値へ

• fromTo: 開始値と終了値の両方を指定

gsap.from(".heading", { y: 24, opacity: 0, duration: 0.8 });

gsap.fromTo(
  ".image",
  { scale: 0.9, opacity: 0 },
  { scale: 1, opacity: 1, duration: 1 }
);

ページ表示時の演出には、見えない状態から本来のCSS状態へ戻せるfromが便利です。

実際に試してみよう

見出しを下からフェードインさせ、画像を少し縮小した状態から表示してください。