GSAP 스크롤트리거 실습 01

시작하기

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 다시 처음 상태로 동작
  (toggleActions 속성값 검색해서 알아보기)