❮ Previous

ScrollTrigger start, trigger and vars

  •  Learn how trigger, start, and vars define when and how GSAP ScrollTrigger animations begin.

  • Introduction

    Every ScrollTrigger animation answers three important questions:

    1. Which element should be watched? → trigger

    2. When should animation start? → start

    3. Where are all settings stored? → vars

    Understanding these three makes ScrollTrigger easy and predictable.

What is trigger?

trigger defines which element controls the scroll behavior. 

scrollTrigger: {
  trigger: ".section"
}

  •  The animation reacts when .section scrolls into view.

    Common Use

    • Section animations

    • Card reveals

    • Text animation

The animation reacts when .section scrolls into view. Common Use Section animations Card reveals Text animation 

element-position viewport-position


start: "top 80%"

  • Meaning

    • top → top of trigger element

    • 80% → 80% down the viewport

  •  Common start Values

    ValueMeaning
    top bottomElement enters viewport
    top centerElement reaches center
    top topElement hits top of screen
    center centerPerfect alignment
    +=100After 100px scroll

  • What are vars?

    vars simply means all configuration options passed to ScrollTrigger.

    📌 In GSAP, vars = the object inside scrollTrigger.

Basic Syntax (Trigger + Start + Vars) 

gsap.to(".box", {
  x: 200,
  duration: 1,
  scrollTrigger: {
    trigger: ".box",
    start: "top 75%",
    markers: true
  }
});

  • Breakdown

    • trigger → .box

    • start → when animation begins

    • vars → all ScrollTrigger settings

Fade In Section on Scroll 

gsap.from(".section", {
  opacity: 0,
  y: 50,
  scrollTrigger: {
    trigger: ".section",
    start: "top 80%"
  }
});

Start Animation Later 

gsap.to(".image", {
  scale: 1.2,
  scrollTrigger: {
    trigger: ".image",
    start: "center center"
  }
});

: Using vars with Multiple Options 

ScrollTrigger.create({
  trigger: ".panel",
  start: "top top",
  end: "+=300",
  pin: true,
  markers: true
});
Lesson image
❮ Previous