[Web] GSAP 메소드 매개변수와 효과의 종류

Transform

gsap 메소드의 매개변수로 var 변수를 받는다. 매개변수들 중 CSS Transform에 접근하는 방법을 표로 보여주고 있다.

GSAP	CSS	Explanation
x: 100	transform: translateX(100px)	Move horizontally (px or SVG units)
y: 100	transform: translateY(100px)	Move vertically (px or SVG units)
xPercent: -50	transform: translateX(-50%)	Move horizontally (percentage of element's width)
yPercent: -50	transform: translateY(-50%)	Move vertically (percentage of element's height)
rotation: 360	transform: rotate(360deg)	Rotate (degrees)
scale: 2	transform: scale(2, 2)	Increase or decrease size
transformOrigin: "0% 100%"	transform-origin: 0% 100%;	The center of translation, this will rotate around the bottom left.

 

Special Properties

duration	Duration of animation (seconds) Default: 0.5
delay	Amount of delay before the animation should begin (seconds)
repeat	How many times the animation should repeat.
yoyo	If true, every other repeat the tween will run in the opposite direction. (like a yoyo) Default: false
stagger	Time (in seconds) between the start of each target's animation (if multiple targets are provided)
ease	Controls the rate of change during the animation, like the motion's "personality" or feel. Default: "power1.out"
onComplete	A function that runs when the animation completes

 

Easing

gsap.to(".green", { rotation: 360, duration: 2, ease: "none" });

gsap.to(".purple", { rotation: 360, duration: 2, ease: "bounce.out" });

이징을 다룰 때 굉장히 편리한 비주얼라이저를 이용하세요.

https://greensock.com/ease-visualizer/

Ease Visualizer

 

Stagger

*** GSAP 3버전에서만 동작합니다.

'엇갈림 애니메이션' 입니다. 순차적으로 실행되면서 파도타기처럼 연출됩니다.

몇 가지 옵션을 조정하면 애니메이션을 시각적으로 훨씬 더 흥미롭게 만들 수 있습니다. 

gsap.to(".box", {
  y: 100,
  stagger: function(index, target, list) {
    // your custom logic here. Return the delay from the start (not between each)
    return index * 0.1;
  }
});

인터랙티브 데모를 보면 쉽게 이해할 수 있습니다.

https://greensock.com/docs/v3/Staggers