모션·인터랙션 / GSAP / ScrollTrigger
Stagger items in on scroll
스크롤로 들어오는 이미지들을 묶어 순차적으로 나타냅니다.
미리보기 안의 버튼·입력·포인터로 모션을 확인하세요. 실행 방식은 아래 활용 메모를 참고하세요.
실행용 통합 HTML · 공식 GSAP 3.15.0
<!doctype html>
<!-- Archived from GSAP Demo Hub / stagger-items-in-on-scroll
Original editor: https://codepen.io/GreenSock/pen/NWGPxGZ
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>Stagger items in on scroll</title>
<link rel="stylesheet" href="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/wvZQKQP.css">
<style>
body{display:flex;align-items:center;justify-content:center;min-height:100vh;flex-direction: column;}
.header {
text-align: center;
max-width: 560px;
margin-top: 2rem;
margin-bottom: 2rem;
}
.header h1 {
font-weight: 400;
font-size: clamp(1.3rem, 3vw, 1.8rem);
color: var(--light);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.header p {
font-size: 0.86rem;
color: var(--surface50);
line-height: 1.55;
}
.container {
max-width: 800px;
margin: auto;
width: 100%;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
img {
width: 30%;
max-width: 100%;
display: inline-block;
aspect-ratio: 16/9;
object-fit: cover;
margin: 5px;
opacity: 0;
will-change: transform;
border-radius: 5px;
}
header {
position: fixed;
top: 0px;
left: 0px;
padding: 6px 10px 6px 10px;
border-bottom-right-radius: 26px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
}
</style></head><body>
<div class="header">
<h1>ScrollTrigger.batch()</h1>
<p>
Easily create a staggered animation of all the elements that enter the viewport around the same time with batch().
</p>
</div>
<div class="container">
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/planetono.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/sanrita.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/anima.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/giulio.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/lando.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/glenn.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/fantik.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/romei.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ironhill.jpeg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/inkwell.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/monolith.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/phantom.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ribbit.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aurel.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aether.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/cashapp.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/osmo.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/pantheon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ponpon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/planetono.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/sanrita.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/anima.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/giulio.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/lando.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/glenn.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/fantik.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/romei.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ironhill.jpeg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/inkwell.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/monolith.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/phantom.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ribbit.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aurel.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aether.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/cashapp.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/osmo.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/pantheon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ponpon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/planetono.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/sanrita.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/anima.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/giulio.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/lando.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/glenn.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/fantik.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/romei.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ironhill.jpeg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/inkwell.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/monolith.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/phantom.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ribbit.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aurel.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aether.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/cashapp.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/osmo.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/pantheon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ponpon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/planetono.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/sanrita.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/anima.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/giulio.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/lando.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/glenn.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/fantik.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/romei.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ironhill.jpeg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/inkwell.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/monolith.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/phantom.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ribbit.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aurel.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aether.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/cashapp.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/osmo.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/pantheon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ponpon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
</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>
// https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.batch(".image", {
// interval: 0.1, // time window (in seconds) for batching to occur.
// batchMax: 3, // maximum batch size (targets)
onEnter: batch => gsap.to(batch, {autoAlpha: 1, stagger: 0.2, duration: 1, ease: "sine.out"}),
// also onLeave, onEnterBack, and onLeaveBack
// also most normal ScrollTrigger values like start, end, etc.
});
</script>
</body></html>
원본 HTML
<div class="header">
<h1>ScrollTrigger.batch()</h1>
<p>
Easily create a staggered animation of all the elements that enter the viewport around the same time with batch().
</p>
</div>
<div class="container">
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/planetono.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/sanrita.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/anima.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/giulio.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/lando.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/glenn.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/fantik.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/romei.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ironhill.jpeg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/inkwell.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/monolith.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/phantom.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ribbit.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aurel.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aether.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/cashapp.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/osmo.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/pantheon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ponpon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/planetono.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/sanrita.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/anima.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/giulio.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/lando.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/glenn.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/fantik.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/romei.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ironhill.jpeg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/inkwell.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/monolith.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/phantom.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ribbit.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aurel.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aether.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/cashapp.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/osmo.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/pantheon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ponpon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/planetono.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/sanrita.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/anima.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/giulio.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/lando.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/glenn.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/fantik.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/romei.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ironhill.jpeg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/inkwell.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/monolith.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/phantom.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ribbit.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aurel.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aether.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/cashapp.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/osmo.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/pantheon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ponpon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/planetono.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/sanrita.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/anima.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/giulio.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/lando.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/glenn.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/fantik.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/romei.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ironhill.jpeg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/inkwell.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/monolith.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/phantom.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ribbit.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aurel.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/aether.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/cashapp.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/osmo.png" alt="" />
<img class="image" src="https://assets.codepen.io/16327/pantheon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/ponpon.jpg" alt="" />
<img class="image" src="https://assets.codepen.io/16327/quentin.png" alt="" />
</div>원본 CSS
body{display:flex;align-items:center;justify-content:center;min-height:100vh;flex-direction: column;}
.header {
text-align: center;
max-width: 560px;
margin-top: 2rem;
margin-bottom: 2rem;
}
.header h1 {
font-weight: 400;
font-size: clamp(1.3rem, 3vw, 1.8rem);
color: var(--light);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.header p {
font-size: 0.86rem;
color: var(--surface50);
line-height: 1.55;
}
.container {
max-width: 800px;
margin: auto;
width: 100%;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
img {
width: 30%;
max-width: 100%;
display: inline-block;
aspect-ratio: 16/9;
object-fit: cover;
margin: 5px;
opacity: 0;
will-change: transform;
border-radius: 5px;
}
header {
position: fixed;
top: 0px;
left: 0px;
padding: 6px 10px 6px 10px;
border-bottom-right-radius: 26px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
}
원본 JavaScript
// https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.batch(".image", {
// interval: 0.1, // time window (in seconds) for batching to occur.
// batchMax: 3, // maximum batch size (targets)
onEnter: batch => gsap.to(batch, {autoAlpha: 1, stagger: 0.2, duration: 1, ease: "sine.out"}),
// also onLeave, onEnterBack, and onLeaveBack
// also most normal ScrollTrigger values like start, end, etc.
});검증·권리 정보
- 실행 검증
- 데스크톱 실행 확인
- 검증 수준
- 샘플 실행
- 권리 확인
- 확인 필요
스크롤로 들어오는 이미지들을 묶어 순차적으로 나타냅니다.
Chromium 153 · 데스크톱 1280×900 · 격리 iframe에서 스크롤 입력과 화면 변화 확인. 모바일·프로젝트 적용은 미검증.
원본 패널과 통합 실행 파일은 분리해 보관했습니다. 원본의 구형 전용 라이브러리 대신 통합 실행은 공식 GSAP 3.15.0을 사용합니다.
보관·활용 메모
GSAP Demo Hub의 공개 예제입니다. 원본 HTML·CSS·JavaScript와 설정, 시연 파일을 함께 보관했습니다. 통합 HTML은 공통 스타일과 실행 의존성을 연결한 파일이며 SCSS는 원본 컴파일 결과를 사용합니다.
구형 CodePen 전용 의존성을 그대로 배포하지 않고, 통합 실행에는 공식 GSAP 3.15.0을 연결했습니다. 원본 패널과 원본 설정은 ZIP에 별도로 보존되어 있습니다. 예제의 이미지·폰트 등 외부 소재 요청은 유지됩니다.
보관일 2026-10-26 · 원본 코드·작성자·설정 정보를 보존했습니다. 실제 프로젝트에서 코드와 이미지·폰트의 사용 조건을 확인하세요.