[3D 텍스트효과(2)] GSAP을 위한 애니메이션 Timeline flow"기획", 이렇게 하면 될까요?

Question

안녕하세요, 애니메이션 Timeline을 기획(정의)하는 법(방식)?에 대해 문의드립니다!   섹션, "3D 텍스트효과(2)" 에서 인터벌 단위로, duration, stagger, pause, 각각의 value 계산 법을 알려주셨는데요   강좌에서 나온 예시 SVG 이미지 보면서, 저렇게 애니메이션을 정의하면 되겠다, 인사이트를 얻었습니다.   문득, 범쌤께서는 어떻게 애니메이션 flow를 정의 하시는지, 관점이나, 포인트가 궁금 해졌습니다! (이미 강의에서 SVG 이미지로 보여주셨지만, 혹시 더 있을까봐서요,,,)   강의 내용처럼, 애니메이션을 duration, stagger, pause, delay 단위로 배치하면, GSAP을 적용하는데 용이 하다 라고 이해하면 될까요?!   블럭 맞추듯 척척, 애니메이션이 구현되는 과정이 신기하네요!   감사합니다!

범쌤 · Answer

안녕하세요 프린이님 😀   실망하실수도 있겠지만 저는 설계를 완벽히 하고 들어가는 성격은 아닙니다. ㅎㅎ.. animation flow를 만들 때, 일단 머릿속에 생각나는대로 코드를 짜집어서 만들어 보고 이후 애니메이션에 문제점 (겹침이나 깨짐, 안움직임) 이 나타난다면 세부적으로 들어가 하나씩 원인을 파악하며 원하는 애니메이션을 구현해 나갑니다.   원인을 파악하는 단계에서 저렇게 duration, delay, repeat, stagger, repeatDelay 등등 다양한 항목들을 쪼개가면서 이해하는 편입니다.   이때 머릿속에 정말 그림이 안그려진다면, ui 도구들이나 손그림을 사용해 애니메이션의 타임라인을 그려서 언제 들어오고 언제 빠져야 하는지 설계를 하기도 합니다.     그리고 이 수업을 수강하신 프린이 님도 마찬가지겠지만, 이렇게 각 애니메이션의 duration, delay, 그리고 각각의 stagger 들의 duration과 delay, repeatDelay들의 값을 이해하고 만져보셨다면 다른 애니메이션을 봤을때의 관점과 포인트가 보이게 됩니다. (아직은 익숙하지 않을 수 있습니다)   이걸 알고 보는 애니메이션과 모르고 보는 애니메이션은 완전 다른 차이를 가지고 있습니다. 저의 애니메이션 flow와 관점, 포인트를 물어보신다면 아마 이런 내용들이지 않을까 생각합니다.       그리고 저는 많은 애니메이션을 만들다 보니 나름의 경험(?)이 생겨서 어느정도는 다 구현이 가능한데, 생각해보면 많은걸 만들어 봤기 때문이 아닐까 라는 생각이 듭니다. (자기자랑 아닙니다) 프린이님도 이 강의를 통해 gsap을 보다 깊게 익히시고 만들고자 하는 사이트를 하나 정한 후 많은 애니메이션을 직접 핸들링 해보는 경험을 가지시면 좋을것 같습니다.     감사합니다 :)