v2: GSAP가 문제가 되지 않을 때

Source: Dev.to

v1: GSAP와 싸우기

• 애니메이션은 단순하고 고정돼 있었으며 (스크롤에 의해 구동)
• GSAP은 협업이라기보다 내가 싸워야 할 대상처럼 느껴졌다.

v2: 다른 사고방식

“애니메이션 추가”에서 “시스템 애니메이션”으로

GSAP을 메인 앱에 억지로 끼워 넣는 대신, orb‑lab이라는 별도 라우트를 만들어 압박 없이 실험했다. 경험은 때때로 좌절감을 주었고, 몇몇 커밋 메시지는 아이디어를 포기하고 싶었던 순간을 암시하기도 했지만, 나는 계속 진행했다.

핵심 아키텍처 변화

• orb의 여정은 이제 하나의 거대한 타임라인이 아니다. 히어로 섹션에서 프로젝트 섹션으로 이동하면서, 각 구간이 자체 책임을 담당한다.

기술 하이라이트

곡선 SVG 예시

1. 첫 시도 – GSAP이 전역 애니메이션 상태와 충돌했다.
2. 해결책 – 순수 JavaScript와 CSS로 애니메이션을 다시 작성했다:
   • 스크롤 위치를 진행률에 매핑한다.
   • 값을 시간에 따라 부드럽게 만든다.
   • SVG 경로 점을 뷰포트 좌표로 변환한다.
   • 팔로워를 직접 이동시킨다.

기본 수학을 이해하면서 수정이 명확해졌다.

GSAP이 애니메이션을 넘어 가르쳐 준 것

• 애니메이션은 UX이며, 장식이 아니다.
• 절제는 복잡성보다 낫다; 언제 멈춰야 할지를 아는 것이 중요한 스킬이다.

감사 인사

@webdeveloperhyper 님의 포스트와 GSAP, R3F, 애니메이션 기본에 관한 유익한 댓글에 큰 감사를 전한다. 그의 조언 덕분에 나는 속도를 늦추고 도구들을 진정으로 이해하려 노력했다.

결론

• v1은 내가 얼마나 몰랐는지를 드러냈다.
• v2는 이해가 절제에서 온다는 것을 보여준다, 더 많은 기능을 추가함으로써가 아니라.

재미있었고, 다음 반복을 기대하고 있다.

View Repository (link omitted).