from()

gsap.from(ref, animation)

gsap.from(ref, {autoAlpha: 0, duration: 2});

to()

gsap.to(ref, animation)

gsap.to(ref, {autoAlpha: 1, duration: 2});

fromTo()

gsap.fromTo(ref, from, to)

보편적으로 duration은 to에 써줌.

gsap.fromTo(ref, {autoAlpha: 0}, {autoAlpha: 1, duration: 2});

---

Ease

ease

애니메이션 재생 텐션 조절

> 종류 docs

ease: "애니메이션 종류.재생속성"

• 재생 속성 : easeIn, easeOut, easeInOut

gsap.from(ref, {autoAlpha: 0, duration: 2, ease: "power4.easeOut"});

---

Utility props

gsap.from(ref, {
	autoAlpha: 0, //opacity와 동일한 개념. 다만, autoAlpha가 0일 때, visibility 속성을 hidden이 되어 DOM요소를 삭제한다.
	duration: 2,
	ease: "power4.easeOut",
	delay: 0.5,
	repeat: 2, //무한 반복(repeat)는 -1로 설정하면 됨.
	repeatDelay: 0.2, //repeat이 바로 진행되지 않고 해당 시간 후 다시 재생.
	yoyo: true // 재생된 animation을 거꾸로 재생해 원상태로 돌아감. default: false
});

stag

계단식으로 Animation을 적용함.

gsap.to(ref, {
	duration: 0.4,
	stagger: 0.2,
	x: "random(100, 100, 50)", //-100 ~ 100이내의 값들 중 랜덤한 값만큼 (단위 50) x방향으로 이동함.
});

"random([-20, 50, 100])" //배열 내부의 값들 중 랜덤한 하나를 적용함.

Stagger

className으로 관리하는 경우, 여러개의 컴포넌트가 순차적으로 나오는 애니메이션을 적용하는 경우,

gsap.from(ref, {
  autoAlpha: 0,
  duration: 2,
  ease: 'power4.easeOut',
  stagger: 0.2,
});

  

// detail config

gsap.from(ref, {
  autoAlpha: 0,
  duration: 2,
  ease: 'power4.easeOut',
  stagger: {
    each: 0.5, // 이전 컴포넌트의 Animation이 끝나고 다음 컴포넌트의 Animation 진행
    amount: 1, // Animation이 적용될 컴포넌트 개수
    from: 'center', // Animation이 적용되는 순서(center, end)
  },
});

  

// use stagger index

gsap.from(ref, {
  autoAlpha: 0,
  duration: 2,
  ease: 'power4.easeOut',
  stagger: (index) => {
    console.log(index);
  },
});

위의 방식을 사용할 경우, Animation이 진행될 때, console.log()가 실행된다.

---

Callback trigger

1. onComplete

Animation이 끝나면 실행할 콜백함수를 받는다.

gsap.to(ref,
	   x: 100
	   duration: 1,
	   repeat: 1,
	   onComplete: () => {
		   console.log('done!');
	   },
	   onStart: () => {
		   console.log('Start');
	   },
	   onUpdate: () => {
		   console.log('Update!');
	   },
	   onRepeat: () => {
		   console.log('REPEAT!')
	   }
   )