GSAP 스크롤트리거 실습 02

스크롤트리거 실습

이미지를 준비하십시오.

스크롤하면 나타나는 애니메이션

gsap.registerPlugin(ScrollTrigger);

gsap.from('.section01 > img', {
  x: 400,
  duration: 1,
  opacity: 0,
  scrollTrigger: '.section01 > img'
});

gsap.from('.section01 > img', {
  x: 600,
  duration: 1,
  opacity: 0,
  scrollTrigger: {
    trigger: '.section01 > img',
    markers: true,
    start: 'top 80%',
    end: 'bottom 20%',
    toggleActions: 'play reverse none reverse'
  }
});

opacity 투명도
toggleActions 'onEnter, onLeave, onEnterBack, onLeaveBack'
onEnter : 시작