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: 대상을 화면에 고정시킨다.