gsap.registerPlugin(ScrollTrigger);
gsap.to('.box-2', {
scrollTrigger: '.box-3',
duration: 1,
x: 400,
rotation: 360,
duration: 4,
});
.box-3
보이면 .box-2
동작
// .box-3 보이면 .box-3 동작
gsap.to('.box-3', {
scrollTrigger: '.box-3',
duration: 1,
x: 400,
rotation: 360,
duration: 4,
});
gsap.to('.box-3', {
scrollTrigger: {
trigger: '.box-3',
markers: true,
start: 'top 100%',
end: "bottom, 10%",
toggleActions: 'play pause resume none',
},
duration: 1,
x: 400,
rotation: 360,
duration: 4,
});
markers
스크롤 시야 (그림으로 참고)
start
요소의 top이 보이면 동작
start의 속성
top: 요소의 위치, 100%: start의 스크롤 위치
end
요소의 bottom이 보이면 동작
end의 속성
bottom: 요소의 위치, 10%: end의 스크롤 위치
toggleActions
: 'play pause none none'
pause
동작 멈춤resume
동작 멈췄던 요소 다시 동작reverse
다시 처음 상태로 동작