Timeline

Timelineを使うと複数のTweenをひとまとまりにし、順番や重なりを管理できます。

このLessonのゴール

• Timelineを使う目的を説明できる
• 複数のTweenを順番につなげられる
• position引数を使ってアニメーションの開始時間を重ねられる

const timeline = gsap.timeline();

timeline
  .from(".hero-title", { y: 30, opacity: 0, duration: 0.8 })
  .from(".hero-text", { y: 20, opacity: 0, duration: 0.6 }, "-=0.3")
  .from(".hero-button", { opacity: 0, duration: 0.4 });

-=0.3 は直前のTweenが終わる0.3秒前から開始する指定です。

実際に試してみよう

ヒーローエリアの見出し、文章、ボタンを少しずつ重ねながら順番に表示してください。