[Error Handling Log] GSAP 버전업 이후 바뀐 문법 코드에 적용하기 / 박지영

### **어떤 에러인가요?**

- 자바스크립트만으로 작성된 코드를 리액트로 옮겨서 리팩토링하던중, gsap이 버전업이 되어 문법이 조금씩 바뀐 것을 알았음. 간단히 정리하자면 아래와 같다.

### **에러 핸들링 방법**

- 자바스크립트에서 리액트로 넘겨올 때, 돔에 접근할때는 useRef훅 사용하기
- 바뀐 TweenMax, TimelineMax 문법 적용하기
- timeline에서 속성 넘길 때... 문자열로 넘어가면 안 됨(ex. scaleY, height 속성)

코드는 아래와 같다.
```js

//이전 버전
TweenMax.to(".wrapper", 2, {
top: "-100%",
ease: Expo.easeInOut,
delay: 3.6
});

var tl = new TimelineMax();

tl.from(".loader", 1.6, {
scaleY: "0%",
y: 80,
ease: Expo.easeInOut,
delay: 1,
transformOrigin:"50% 100%"
});

tl.to(".loader", 1.6, {
height: "20vh",
scaleY: "0%",
ease: Expo.easeInOut,
transformOrigin:"0% -100%"
});

TweenMax.to(".box", 2.4, {
y: "-100%",
ease: Expo.easeInOut,
delay: 6,
});

//이후 버전

import gsap from "gsap";

gsap.to(wrapperRef.current, {
duration: 3,
top: "-100%",
ease: "power3.inOut",
delay: 3.6
});

var tl = gsap.timeline();

tl.from(loaderRef.current, {
duration: 2,
scaleY: 0,
y: 80,
ease: "power3.inOut",
delay: 1,
transformOrigin:"50% 100%"
});

tl.to(loaderRef.current, {
duration: 2,
height: 50,
scaleY: 0,
ease: "power3.inOut",
transformOrigin:"0% -100%"
});

gsap.to(boxRef.current, {
duration: 2,
y: "-100%",
ease: "power3.inOut",
delay: 5,
});
```

### **에러 핸들링을 위해 참고한 레퍼런스 링크**
- 공식문서: https://greensock.com/3-migration/