GSAP 트윈맥스(Tween Max) 재대로 톺아보기

 

이전의 단순한 정보를 제공하던 동적이던 웹 화면은 이제는 더 이상 찾아보기 힘듭니다. 단순 정보만을 제공하는 웹 화면이라 할지라도 사용자의 시선을 끌어들이고 유저의 흥미와 재미요소를 위해서 점점 다양한 애니메이션이 적용된 웹 화면들이 생기고 있습니다. 

 

그럼 웹 화면에 일반적으로 애니메이션 효과를 주기 위해선 어떻게 할까요?

html로 화면을 구성할 때 가장 일반적인 방법은 Jquery를 사용하여 animate 효과를 주거나 Css3 속성을 사용하여 애니메이션 효과를 주는 방법입니다. 

 

그럼 우리는 트윈맥스를 사용해야 하는 이유가 뭘까요?

GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 Jquery의 animation 보다 더 정밀한 컨트롤을 할 수 있습니다. 또한 Jquery보다 가볍고 성능도 우수합니다. 더욱이 움직임에 좀 더 다양한 효과를 적용할 수 있는 easing기능도 기본적으로 적용되어 있습니다. (Jquery는 easing기능을 사용하려면 별도로 해당 라이브러리를 불러와야 합니다.)

 

 

✍ GSAP란?

The GreenSock Animation Platform (줄여서 GSAP)는 웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. 

GSAP을 사용하기 위해선 GSAP 공식 사이트에서 다운로드하거나 CDN으로 적용하거나 혹은 npm install gsap로 설치할 수 있습니다.

 

# 적용방법

- CDN 버전 선택 방법 : https://cdnjs.com/libraries/gsap/3.8.0

- Download 방법 : https://greensock.com/docs/v3/Installation/#download

- NPM 설치 방법 : https://greensock.com/docs/v3/Installation/#npm-club

 

📖 GSAP 기본 사용 문법

GSAP는 자바스크립트 객체의 숫자형 속성을 통해 애니메이션을 실행합니다.

참고로 공식 사이트에 따르면 TweenMax로 사용하던 방법들이 gsap을 변경되면서 사용 방법들도 조금씩 변경되었습니다.

// old 
TweenMax.to(".class", 2, {x: 100});

// new
gsap.to(".class", {duration: 2, x: 100});

// -- Timelines --

// old 
var tl = new TimelineMax();

// new
var tl = gsap.timeline();

 

1. gsap.to()

gsap에서 가장 기본적으로 사용되는 속성으로 .to()는 일반적으로 .animate() 라고 생각하면 이해가 쉽습니다.

Target 요소 속성에서 지정한 속성까지 애니메이션 됩니다.

// 기본 작성
gsap.to("애니메이션 요소", {속성값, duration: 시간(초)});

// 예제
gsap.to(".box", {rotation: 27, x: 100, duration: 1});

 

2. gsap.from()

to와 정반대로 시작 값을 정하고 원래대로 되돌아오는 애니메이션이 실행됩니다.

gsap.from(".class", {opacity: 0, y: 100, duration: 1});

 

3. gsap.fromTo()

from 속성이 시작 값으로 세팅되고 to 속성이 종료 값으로 세팅되어 애니메이션 효과가 적용됩니다.

gsap.fromTo(".box", {opacity: 0}, {opacity: 0.5, duration: 1});

 

4. gsap.set()

애니메이션 효과 없이 즉시 변경됩니다.

// To를 사용할 시 duration 시간을 0을 사용하게 되면 
// set과 동일한 효과 및 직관적인 코드로 사용할 수 있습니다.
gsap.set(".class", {x: 100, y: 50, opacity: 0});
gsap.to(".class", {duration: 0, x: 100, y: 50, opacity: 0});

// 복수(multiple targets)도 적용 가능
gsap.set([obj1, obj2, obj3], {x: 100, y: 50, opacity: 0});

 

5.gsap.play(), .pause(), resume(), reverse(), restart()

특정한 요소의 애니메이션을 멈추거나 재실행하는 등의 컨트롤도 가능합니다.

 

 

6. Timeline

delay를 사용해서 애니메이션을 순차적으로 실행할 수 있습니다.

// WITHOUT Timelines (only using delays):
gsap.to("#id", {x: 100, duration: 1});
gsap.to("#id", {y: 50, duration: 1, delay: 1});      //wait 1 second
gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); //wait 2 seconds

 

 

🎉 언제 에니매이션 효과를 적용할 것인가?

기본적인 애니메이션 사용방법을 살펴봤습니다. 하지만 애니메이션이 내가 원하는 시점에 정확히 동작하는 것 또한 애니메이션 요소의 효과를 적용하는 것만큼 중요한 부분입니다.(아직 화면은 이벤트 요소가 일어난 곳에 도달하지 못했는데 아래에서 애니메이션 효과가 적용된다면 사용자는 애니메이션이 적용되었는지 알 수가 없죠😥😥😥)

 

그렇기 때문에 브라우저 화명의 스크롤이 어디에 위치했는지 여부에 따라서 애니메이션 효과가 적용되는(Scroll Trigger) 스크롤 이벤트가 중요합니다. 스크롤 이벤트에 관해서는 Gsap과 같이 사용하는 유명한 라이브러리인 스크롤매직(Scroll Magic)이 있지만 이 내용은 다음에 정리하기로 하고 오늘은 Gsap에 같이 제공하는 스크롤 라이브러리로 설명하려고 합니다.

 

📖 공식 사이트 혹은 CDN 혹은 npm 등 편한 방법으로 ScrollTrigger.js나 ScrollTrigger.min.js 를 다운로드하여 적용합니다.

 

해당 스크롤 이벤트를 사용하기 위해선 상단에 gsap.registerPlugin(ScrollTrigger); 로 스크롤 트리거 플러그인을 불러오고 gsap 애니메이션 내부에 scrollTrigger 속성을 추가하여 애니메이션 효과를 줄 요소를 등록해주어야 합니다.

 

1. 기본방법 (1회성 애니메이션)

아래의 방법은 스크롤을 다시 올렸다가 내려봐도 이미 실행된 애니메이션 효과가 다시 시작되지 않습니다.

// 스크롤 트리거 호출
gsap.registerPlugin(ScrollTrigger);

gsap.to(".box1", {
  scrollTrigger: ".box1", // 애니메이션 요소 등록
  x: 400, 
  duration: 2
})

 

2. 토글액션 (toggleActions)

토클 액션을 등록해주면 스크롤이 초기화 되었다가 다시 이벤트가 발생하는 시점에 스크롤이 도달하면 애니메이션 효과가 반복됩니다.

// 스크롤 트리거 호출
gsap.registerPlugin(ScrollTrigger);

gsap.to(".box1", {
   scrollTrigger: {
    trigger: ".box1",
    toggleActions: "restart none reverse none"
  },
  x: 400, 
  duration: 2
})

 

toggleActions은 "onEnter, onLeave, onEnterBack, onLeaveBack" 네 가지로 구성됩니다.

• onEnter : 이벤트 발생 위치에 도달
• onLeave : 이벤트 발생 위치를 떠남
• onEnterBack: 스크롤을 다시 올려 이벤트 발생 위치에 도달
• onLeaveBack: 스크롤을 다시 올려 이벤트 발생 위치를 떠남

 

3. 시작/종료 지점 선택

애니메이션이 실행되는 지점은 화면의 하단에 해당 요소의 상단 부분이 보일 때입니다. 이 두 지점을 바꾸고 싶다면 start 메서드를 사용해야 하는데 그전에 인디케이터를 표시하기 위해 markers: true를 추가합니다.

그러면 scroller-start가 화면 최하단에 있고 start가 요소의 상단에 있는 것이 확인됩니다.

 

 

화면의 하단 마커를 중앙으로 옮기려면 start: "top center"를 추가합니다..

gsap.registerPlugin(ScrollTrigger);
gsap.to(".box2", {
  scrollTrigger: {
    trigger: ".box2",
    toggleActions: "resume pause reset pause",
    markers: true,
    start: "top center",
  },
  x: 400, duration: 4,
});

 

 

마찬가지로 요소의 하단에서 start 하고 싶다면 start: "bottom center"로 바꾸면 됩니다.

 

종료 지점 역시 마찬가지로 start 대신 end를 사용하면 됩니다.

 

4. Scrub (되감기)

scrub은 간단하면서 자주 쓰이는 기능으로 스크롤이 요소 이전으로 돌아가면 애니메이션 역시 되돌아가는 기능을 말합니다. 즉 애니메이션을 재사용 할 수 있는 기능으로 일회성 애니메이션 효과가 아닌 곳에 사용할 수 있습니다.

사용방법은 scrub: true를 입력하거나 수치를 입력하는 두 가지 방법이 있는데 true 대신 수치를 입력하는 것이 더 부드럽게 애니메이션 효과가 적용됩니다.

 

 

5.Pinning (화면 고정)

pinning은 핀으로 화면을 고정한 기능이라고 생각하면 이해가 쉽게 받아들여집니다.

사용법은 pin: true, 혹은 pin: "요소의 Class/ID명" 입니다.

 

 

 

Pinning은 원페이지 스크롤 애니메이션에도 적용할 수 있습니다.

 

 

Pinning이 적용된 예제입니다.

 

6. Spinning

Spinning은 스크롤 시 화면이 수직이 아닌 수평으로 이동하는 기능을 말하며 위에서 배운 pin, scrub, snap 모두 쓰이고 심지어 ease: "none" 도 없으면 사용할 수 없습니다.

 

 

 

출처 및 참고, 예제

• https://greensock.com/docs/v3/GSAP/
• https://lpla.tistory.com/107