Animation
Animation
GSAP
GreenSock에서 만든 Animation Platform
애니메이션을 JS로 쉽게 구현할 수 있게 도와주는 라이브러리
Method
.to(targets, options})
: 애니메이션을 적용할 타겟을 지정하여 애니메이션을 설정.timeline()
ScrollTrigger
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.to(target, {
scrollTrigger: {
trigger: Trigger DOM Target,
// 트리거로 지정한 top 부분이 뷰포트 bottom 영역을 도달한 순간 애니메이션을 시작
start: 'top bottom',
end: 'bottom bottom',
markers: true,
scrub: true,
}
})
trigger: trigger 지정 요소가 viewport 안에 들어오는 순간 위에 지정한 애니메이션이 트리거되라
start: scroll trigger가 시작되는 시점을 설정 (default => 'top bottom')
end: 애니메이션이 끝나는 시점을 설정
markers: 이벤트가 시작되는 시점을 시각적으로 확인 가능
scrub: 화면을 스크롤하는 순간 바로 적용되는 것이 아닌 스크롤한 정도에 따라 변화된다.
pin: 대상을 화면에 고정시킨다.
Last updated