스크롤 애니메이션은(는) 무엇을 하나요?
10가지 스크롤 애니메이션 패턴으로 가는 라우터입니다. JOS를 제외한 모든 패턴은 동일한 React + Framer Motion 기본 요소(useScroll + useTransform + useSpring) 위에 구축되므로, 이 파일을 먼저 읽어 공유된 정신 모델을 이해한 후 사용자가 원하는 패턴과 일치하는 참조 파일(들)만 로드하세요.
공유 정신 모델 (Framer Motion 패턴)
이 스킬의 거의 모든 효과는 다음 골격을 따릅니다:
import { motion, useScroll, useSpring, useTransform } from "framer-motion";
import { useRef } from "react";
const containerRef = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start start", "end end"],
});
const smoothProgress = useSpring(scrollYProgress, {
damping: 25, // 20–30: 높을수록 바운스가 적음
stiffness: 200, // 150–300: 높을수록 더 스냅함
mass: 0.5, // 0.5–0.8: 낮을수록 가볍고 빠름
});
const someValue = useTransform(smoothProgress, [0, 1], [startVal, endVal]);
- 컨테이너 높이가 속도/드라마를 제어합니다. 더 많은
vh= 더 느리고 시네마틱한 스크롤. 일반적인 범위:150vh(빠름) ~400vh(명상적). position: sticky; top: 0은 콘텐츠를 뷰포트에 고정시키는 반면, 높은 컨테이너가 애니메이션을 위한 스크롤 공간을 제공합니다.- 항상 원시
scrollYProgress를useSpring으로 감쌉니다. 그렇지 않으면 모션이 물리적이지 않고 로봇처럼/선형적으로 느껴집니다. - 다중 요소 효과(스택, 그리드, 오비터)는 각 항목에 윈도우를 제공합니다:
start = index / total,end = start + 1 / total, 그런 다음[start, end](또는 중간에 피크를 위한 5점 종형 곡선)를 해당 항목의 변환에 매핑합니다. prefers-reduced-motion을 존중하세요: 이를 요청하는 사용자를 위해 정적 레이아웃이나 단순한 페이드 인으로 대체하세요.
패턴 선택 — 선택 가이드
전체 컴포넌트 코드, 변형, 중요한 규칙 및 문제 해결 표를 보려면 references/ 디렉토리에서 일치하는 참조 파일을 읽으세요. 변환 값을 기억에서 추측하지 마세요 — 참조 파일에는 조정된 실제 작동하는 숫자가 있습니다.
| 사용자가 요청한 내용... | 이 참조 파일을 읽으세요 |
|---|---|
| 스크롤하면서 카드가 쌓임/고정됨, 일반적인 "스태킹 카드", 3D 기울기 스택, 다중 레이어 스택, 가로 카드 스택 | references/scroll-stack.md |
| 특히 "Chronos 스타일" 스태킹, 그림자/반경 증가가 있는 공격적인 시네마틱 카드 후퇴 | references/chronos-scroll-stack.md |
| 다중 속도 깊이 레이어, 배경/전경이 다른 속도로 움직임, "엄청난"/극적인 패럴랙스, 떠다니는 악센트 모양 | references/insane-parallax.md |
| Apple 스타일 히어로 이미지 줌, 초점 흐림, 확대되는 이미지 위의 레이어드 텍스트 공개, 시네마틱 제품 출시 줌 | references/immersive-scroll-zoom.md |
| 갤러리 이미지가 보기에 들어올 때 확대됨, 제품 초점 줌, 스크롤 기반 스케일이 있는 이미지 그리드 | references/image-zoom-scrolling.md |
| 이미지가 절반/사분면으로 분할되어 분리됨, 대각선 샤터, 3D 기울기가 있는 에이전시 포트폴리오 스타일 공개 | references/image-split-3d.md |
| 궤도를 도는 요소, 원형 진행 링, 방사형/나선형 갤러리, 원형 경로를 따르는 텍스트 | references/circular-scroll.md |
| 활성화될 때 커지거나 크기가 변하는 카드/타일, 종형 곡선 그리드 확장, 클릭하여 확장하는 벽돌 스타일 | references/expanding-cards-scroll.md |
| 프레임별 스크러빙, "플립북" 스크롤, 캔버스 이미지 시퀀스, 스크롤 위치에 바인딩된 제품 공개 비디오 | references/scroll-image-sequences.md |
| 단순한 페이드/슬라이드/줌 인 공개, 계단식 공개, React/Framer Motion을 사용하지 않음, 또는 명시적으로 "JOS" | references/jos-animation.md |
요청이 모호하거나 여러 패턴에 맞을 수 있는 경우(예: "히어로를 스크롤 시 더 동적으로 만드세요"), 히어로 섹션에는 insane-parallax.md 또는 immersive-scroll-zoom.md를 선호하고, 진정으로 불분명한 경우에만 질문하세요 — 그렇지 않으면 가장 가까운 일치 항목을 선택하고 가정을 명시하세요.
교차 규칙 (패턴에 관계없이 적용)
- JOS를 제외한 모든 패턴에 Framer Motion만 사용 — GSAP나 바닐라 스크롤 리스너 코드는 사용자가 명시적으로 Framer Motion이 아닌 구현을 요청하지 않는 한 사용하지 마세요.
- 거의 모든 곳에서 잘 작동하는 스프링 기본값:
damping: 20–30,stiffness: 150–300,mass: 0.5–0.8. 각 참조 파일은 해당 패턴에 대한 정확한 조정 값을 제공합니다. 차이가 있을 때는 이러한 일반 기본값보다 해당 값을 사용하세요. - 애니메이션 요소에
willChange: "transform, opacity"를 사용하여 컴포지터 스레드에서 처리를 유지하세요. - 스택된 항목의 경우 z-index 수학: 일반적으로
total - index로 이전 요소가 후퇴하는 동안 위에 있도록 합니다. - 너무 많이 애니메이션하지 마세요. 3~8개의 카드/프레임/레이어가 일반적으로 최적점입니다. 그 이상은 피로감을 주거나 모바일 성능에 해로울 수 있습니다.
- 모바일: 스케일 범위를 부드럽게 하고, 레이어/프레임 수를 줄이며, 드라마가 필수적이지 않은 긴 스크롤 기반 시퀀스보다는
whileInView를 선호하세요.
패턴 결합
이러한 패턴은 구성 가능합니다. 랜딩 페이지는 히어로에 insane-parallax를, 기능 섹션에 scroll-stack을, 같은 페이지의 다른 곳에 단순한 계단식 페이드 인을 위해 jos-animation을 사용할 수 있습니다. 각 관련 참조 파일을 독립적으로 읽으세요 — 별도로 명시된 경우(예: scroll-stack.md는 전체 시네마틱 변형을 위해 chronos-scroll-stack.md를 가리킴)를 제외하고는 서로 의존하지 않습니다.