어느 날 gsap으로 인터렉션을 만들던 중, css로 초기값 세팅을 하고 xPercent로 요소를 움직이려고 코드를 작성했다.
우선, css로
transform: translateX(-100%);를 주고 같은 %단위를 사용하니
xPercent: 0으로 만들 생각이었다.
하지만 결과는 제자리에서 움직이지 않았다. 이유가 뭘까하고 개발자도구를 살펴보니 분명 %단위를 입력했는데 들어간 값은 px...
신기하게 같은 이름의 클래스 중 반만 되고 반만 안되는 거였다.
첫번째 시도
- x: '0%'
gsap.to($textTranslateX, { x: '0%'})이렇게 하니 잘 작동했지만, gsap 강의를 들었을 때 x는 기본적으로 px로 계산하기 때문에 % 사용을 추천하지 않는다고 했다. gsap공식문서에서도 기술적인 혼란을 야기할 수 있기 때문에 % 단위는 xPercent 사용을 권고했다.
(참고) https://gsap.com/resources/mistakes/
그리고 gsap 커뮤니티에서 다른 사람들의 질문들을 보다가 가능하면 초기값 세팅을 gsap으로 세팅하길 바란다는 답변을 보고 그렇게 변경하기로 했다.
최종 코드
초기값
gsap.set(target, { xPercent: idx => idx === 0 || idx === 3 ? -100 : 100 })
애니메이션
gsap.to(target, { xPercent: 0})원래도 이렇게 작업을 많이 했지만 글리치 현상을 겪기 싫어서 다른 스타일로 해보려다가 결국 원래 하던대로 하는 게 맞았다... ( 글리치도 autoAlpha로 처리하기로! )
