Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Tags
- object
- 객체
- 클로저
- Promise
- 비동기
- dom
- Push
- map
- scroll
- This
- ajax
- 스크롤
- event
- 문자열
- ios
- 이벤트 위임
- ES6
- slice
- animation
- 이벤트 루프
- video
- json
- Flex
- IntersectionObserver
- 애니메이션
- 이벤트
- 배열
- input
- array
- 모듈
Archives
- Today
- Total
목록2025/03/17 (1)
FEDev Story
[GSAP] ScrollTrigger 속성
GSAP의 ScrollTrigger는 스크롤에 반응하는 애니메이션을 쉽게 만들 수 있도록 도와주는 플러그인입니다. 주요 속성을 정리하면 다음과 같습니다.1. 기본 속성1️⃣ trigger설명: 애니메이션을 트리거할 요소 지정예시:gsap.to(".box", { x: 500, scrollTrigger: { trigger: ".box" }});2️⃣ start & end설명: 애니메이션이 시작(start)하고 끝나는(end) 스크롤 지점 설정형식: "트리거 위치 트리거 대상" ("startPosition startTrigger")기본값: "top bottom" (뷰포트의 아래쪽에서 트리거 요소의 위쪽이 보일 때 시작)예시:scrollTrigger: { start: "top 80%", // 요..
transition&animation
2025. 3. 17. 17:34