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 |
Tags
- 문자열
- 스크롤
- IntersectionObserver
- dom
- 애니메이션
- ES6
- map
- 이벤트 위임
- 객체
- ajax
- 이벤트
- 이벤트 루프
- animation
- ios
- 모듈
- Flex
- event
- object
- Push
- input
- json
- slice
- Promise
- scroll
- video
- 비동기
- 클로저
- 배열
- array
- This
Archives
- Today
- Total
목록gsap (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