모션·인터랙션 / GSAP / ScrollTrigger

Trigger On Scroll

요소가 화면의 특정 위치에 도달할 때 애니메이션을 시작합니다.

미리보기 안에서 스크롤하거나 마우스를 움직여 모션을 확인하세요.

실행용 통합 HTML · 공식 GSAP 3.15.0

<!doctype html>
<!-- Archived from GSAP Demo Hub / trigger-on-scroll
Original editor: https://codepen.io/GreenSock/pen/xxoPrKX
HTML/CSS/JS source panels are preserved separately. Runtime GSAP: 3.15.0 official distribution. -->
<html lang="en" class=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Trigger On Scroll</title>

<style>
@font-face {
  font-display: block;
  font-family: Mori;
  font-style: normal;
  font-weight: 600;
  src: url(https://assets.codepen.io/16327/PPMori-Regular.woff) format("woff");
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 200vh;
  font-family: "Mori";
  color: #fffce1;
  background: #0e100f;
}

main {
  width: 100%;
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#trigger-container {
  position: relative;
  display: block;
  width: 50%;
  max-width: 500px;
  border-top: dashed 2px grey;
  border-bottom: dashed 2px grey;
  padding: 4rem;
}

.info {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 300px;
  background-color: #191919;
  border-radius: 10px;
  gap: 1rem;
}

.info h1 {
  font-size: 1.2rem;
  text-align: center;
}

.info svg {
  height: 20px;
}


.gsap-marker-end, .gsap-marker-scroller-end {
    font-family: "Mori"!important;
   color: #fa7777 !important;
  border-color: #fa7777 !important;
  
}

.gsap-marker-start, .gsap-marker-scroller-start {
   font-family: "Mori"!important;
   color: #abff84 !important;
  border-color: #abff84 !important;
}
</style></head><body>
<main>
  <div id="trigger-container">

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 62">

      <rect fill="url(#grad-1)" width="186" height="62" rx="31" />
      <rect id="knob" fill="url(#grad-2)" width="93" height="62" rx="31" />

      <defs>
        <linearGradient id="grad-1" x1="47" y1="-80" x2="0" y2="99" gradientUnits="userSpaceOnUse">
          <stop offset="0.3" stop-color="#FEC5FB"></stop>
          <stop offset="1" stop-color="#00BAE2"></stop>
        </linearGradient>
        <linearGradient id="grad-2" x1="17" y1="30" x2="42" y2="80" gradientUnits="userSpaceOnUse">
          <stop offset="0.2" stop-color="#FEC5FB"></stop>
          <stop offset="1" stop-color="#00BAE2"></stop>
        </linearGradient>
      </defs>

    </svg>
  </div>
</main>

<div class="info">
  <h1><span id="text">Scroll down</span></h1>
  <svg id="arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 11" aria-hidden="true">
    <path fill="#fffce1" d="M4.055 0v7.71l-3-3L0 5.79l4.805 4.804 4.804-4.805-1.054-1.078-3 3V0h-1.5Z"></path>
  </svg>
</div>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-gsap.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-ScrollTrigger.min.js"></script>
<script>
gsap
  .timeline({
    paused: true,
    scrollTrigger: {
      markers: true,
      trigger: "#trigger-container",
      start: "0 60%",
      end: "100% 40%",
      toggleActions: "play reverse play reverse", //onEnter, onLeave, onEnterBack, onLeaveBack
      onEnter: () => text.innerText = "onEnter",
      onLeave: () => text.innerText = "onLeave",
      onEnterBack: () => text.innerText = "onEnterBack",
      onLeaveBack: () => text.innerText = "onLeaveBack"
    }
  })
  .to("#knob", {
    duration: 1,
    x: 93,
    ease: "expo.inOut"
  });


// changing the text in the bar
let inZone = false
ScrollTrigger.create({
  start: 0,
  end: "max",
  onUpdate: (self) => {
    if (self.direction !== self.prevDirection && !inZone) {
      gsap.to("#arrow", {
        rotation: self.direction === 1 ? 0 : -180,
        duration: 0.2,
      });
      self.prevDirection = self.direction;
    }
  }
});

</script>
</body></html>

원본 HTML

<main>
  <div id="trigger-container">

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 62">

      <rect fill="url(#grad-1)" width="186" height="62" rx="31" />
      <rect id="knob" fill="url(#grad-2)" width="93" height="62" rx="31" />

      <defs>
        <linearGradient id="grad-1" x1="47" y1="-80" x2="0" y2="99" gradientUnits="userSpaceOnUse">
          <stop offset="0.3" stop-color="#FEC5FB"></stop>
          <stop offset="1" stop-color="#00BAE2"></stop>
        </linearGradient>
        <linearGradient id="grad-2" x1="17" y1="30" x2="42" y2="80" gradientUnits="userSpaceOnUse">
          <stop offset="0.2" stop-color="#FEC5FB"></stop>
          <stop offset="1" stop-color="#00BAE2"></stop>
        </linearGradient>
      </defs>

    </svg>
  </div>
</main>

<div class="info">
  <h1><span id="text">Scroll down</span></h1>
  <svg id="arrow" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 11" aria-hidden="true">
    <path fill="#fffce1" d="M4.055 0v7.71l-3-3L0 5.79l4.805 4.804 4.804-4.805-1.054-1.078-3 3V0h-1.5Z"></path>
  </svg>
</div>

원본 CSS

@font-face {
  font-display: block;
  font-family: Mori;
  font-style: normal;
  font-weight: 600;
  src: url(https://assets.codepen.io/16327/PPMori-Regular.woff) format("woff");
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 200vh;
  font-family: "Mori";
  color: #fffce1;
  background: #0e100f;
}

main {
  width: 100%;
  height: 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#trigger-container {
  position: relative;
  display: block;
  width: 50%;
  max-width: 500px;
  border-top: dashed 2px grey;
  border-bottom: dashed 2px grey;
  padding: 4rem;
}

.info {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 300px;
  background-color: #191919;
  border-radius: 10px;
  gap: 1rem;
}

.info h1 {
  font-size: 1.2rem;
  text-align: center;
}

.info svg {
  height: 20px;
}


.gsap-marker-end, .gsap-marker-scroller-end {
    font-family: "Mori"!important;
   color: #fa7777 !important;
  border-color: #fa7777 !important;
  
}

.gsap-marker-start, .gsap-marker-scroller-start {
   font-family: "Mori"!important;
   color: #abff84 !important;
  border-color: #abff84 !important;
}

원본 JavaScript

gsap
  .timeline({
    paused: true,
    scrollTrigger: {
      markers: true,
      trigger: "#trigger-container",
      start: "0 60%",
      end: "100% 40%",
      toggleActions: "play reverse play reverse", //onEnter, onLeave, onEnterBack, onLeaveBack
      onEnter: () => text.innerText = "onEnter",
      onLeave: () => text.innerText = "onLeave",
      onEnterBack: () => text.innerText = "onEnterBack",
      onLeaveBack: () => text.innerText = "onLeaveBack"
    }
  })
  .to("#knob", {
    duration: 1,
    x: 93,
    ease: "expo.inOut"
  });


// changing the text in the bar
let inZone = false
ScrollTrigger.create({
  start: 0,
  end: "max",
  onUpdate: (self) => {
    if (self.direction !== self.prevDirection && !inZone) {
      gsap.to("#arrow", {
        rotation: self.direction === 1 ? 0 : -180,
        duration: 0.2,
      });
      self.prevDirection = self.direction;
    }
  }
});

카테고리

스크롤

사용 기술

GSAP JavaScript ScrollTrigger

출처

GSAP / Cassie

GSAP 원본 ↗CodePen 원본 ↗

보관·활용 메모

GSAP Demo Hub의 공개 예제입니다. 원본 HTML·CSS·JavaScript와 설정, 시연 파일을 함께 보관했습니다. 통합 HTML은 공통 스타일과 실행 의존성을 연결한 파일이며 SCSS는 원본 컴파일 결과를 사용합니다.

구형 CodePen 전용 의존성을 그대로 배포하지 않고, 통합 실행에는 공식 GSAP 3.15.0을 연결했습니다. 원본 패널과 원본 설정은 ZIP에 별도로 보존되어 있습니다. 예제의 이미지·폰트 등 외부 소재 요청은 유지됩니다.

보관일 2026-10-26 · 원본 코드·작성자·설정 정보를 보존했습니다. 실제 프로젝트에서 코드와 이미지·폰트의 사용 조건을 확인하세요.