프론트엔드 엔지니어에게 애니메이션은
깊게 들어갈수록 쉽지 않은 주제인것 같아요.
최근 사용자가 텍스트 입력시 길이가 길어져서
허용된 width 보다 넘치면, 자동으로 텍스트 크기가 작아지는
오토 스케일링 애니메이션을 구현해 보았어요.

가장 처음 떠오른 것은 transform: scale() 이었어요.
javascript 로 크기를 조정하는 것과 다르게
transform 은 새로운 레이어에서 렌더링 된 후 컴포지션 해서요.
(그 과정에서, 브라우저가 GPU 를 활용해서 성능이 최적화 되어서요.)

구체적인 구현 방법도 고민했어요.
useLayoutEffect 를 활용해서 container element 의 width 와
허용된 width 보다 넘치는 inline element 의 렌더링된 width를 저장해두고
각 width 를 비교해서 scale 비율을 계산했어요.

이를 허용된 width 보다 넘치는 inline element 에 적용하기 위해
container element 에 transform: scale({scale}) 을 입혔더니
성공이었어요 🎉

다만 주의할 점은, 사용자가 텍스트를 빠르게 입력하면
가로 스크롤이 발생하는 경우 였어요.
텍스트에 적용된 추가적인 애니메이션이 영향을 준것 같아서
container 의 상위 태그에서 overflow: hidden 을 주어
스크롤 발생을 막았어요 :)

애니메이션의 세계는 넓고도 깊은 것 같아요.
그래도 마지막에 동작하는걸 보니 뿌듯한 마음이 들었어요 🤩
여러분은 최근에 어떤 애니메이션을 구현 하셨나요??
복잡한 애니메이션을 구현하는 노하우가 있으신가요?