GSAP & ScollMagic 사용하기

ScrollTrigger란?

동적인 사이트를 만들 때 빠지지 않고 사용하는 라이브러리 중 하나이다.
최소한의 코드로 스크롤 애니메이션을 구현할 수 있다.

• GSAP 공식사이트
  https://greensock.com/docs/v3/Installation
• cdnjs
  https://cdnjs.com/libraries/gsap

1. setting

//cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

//스크롤 트리거 불러오기(플러그인 안정화)
<script>
gsap.registerPlugin(ScrollTrigger);
</script>  

2. 기본 사용법

gsap.to(대상, {
    scrollTrigger:{
        trigger:대상,
        스크롤속성:값,
        스크롤속성:값
    }, 속성:값, duration:재생시간
})

3. 샘플

https://greensock.com/scrollmagic/

See the Pen scrollTrigger by odada (@odada) on CodePen.

See the Pen ScrollTrigger by odada (@odada) on CodePen.

See the Pen 2. GSAP and ScrollMagic w/tween duration by Craig Roblewsky (@PointC) on CodePen.

See the Pen 3. GSAP and ScrollMagic w/scene duration by Craig Roblewsky (@PointC) on CodePen.

See the Pen 4. GSAP and ScrollMagic jQuery each() loop by Craig Roblewsky (@PointC) on CodePen.