---

• 360 이미지 드래그 회전 — GSAP Draggable

---

• Random values on each timeline repeat - GSAP - GreenSock¹
• Superhero Animation Effect with SVG Filters - Codrops²
• Interactive Data Visualization: Animating the viewBox | CSS-Tricks³
• Stealing Game Animation Techniques to Engage Users⁴
• Easing 함수 치트 시트

모션 블러 효과

• motion blur with svg gaussianblur (tween only the x value) - GSAP - GreenSock
• Motion Blur Effect with SVG - Codrops
• How to Create a Realistic Motion Blur with CSS Transitions | CSS-Tricks⁵

모션 디자인 원칙

• How to Make Motion Graphics in 4 Simple Steps
• 구글, 리프트에서 배운 모션그래픽 법칙 6가지
• Animation Handbook - DesignBetter
• A guide to Motion Design principles | by Micah Bowers | UX Collective
• Applying Disney’s basic principles of animation to UI design | Dribbble Design Blog
• Motion Design Doesn’t Have to be Hard | by Jonas Naimark | Google Design | Medium

---

Footnotes

1. 랜덤 벨류 ↩

2. mask feTurbulence feDisplacementMap 합성 ↩

3. viewbox 값을 제어 ↩

4. 비디오 게임에서 좋은 아이디어…특히 애니메이션 기법을 배운다는 내용 ↩

5. 여러개 엘리먼트에 transition-delay로 시간차를 주는 방법으로 구현하고 있다. ↩

360 이미지를 드래그해서 회전시키는 기능을 개발할때 3d 리소스를 제공 받을 수 있다면 three.js 같은 라이브러리를 사용해서 쉽게(?) 구현이 가능하다. three.js가 초반 진입 장벽이 높은 것 같지만 단순히 모델 리소스를 보여주는 정도는 배경지식이나 기본지식이 없더라도 어느정도 예제 코드들을 본다면 구현이 가능하다고 본다. 물론 제대로 하고 싶다면 배경지식과 three.js 자체에 대한 학습이 필요.

그런데 부득이하게 여러장으로 된 이미지만 제공 받을 수 있다면 직접 구현해야한다. 그런데 생각보다 드래그 기능을 처음부터 구현한다는게 보통의 개발자들에게는 불편한게 사실이므로 이미 존재하는 플러그인이나 라이브러리를 사용하는게 현실적이다.

그래서 찾아본 gsap의 Draggable. 그런데 문서를 보면 다이얼 같이 (뭐라 표현하는게 적당한지 모르겠지만) 직접적으로 드래그 하는 관점의 설명들이 대부분이다. 그런데 360 이미지 같은 경우는 직접적으로 드래그 라기보다는 액션을 빌린 동작이어서 처음에 약간 혼란스러웠는데 좀 더 찾아보니 proxy의 개념을 빌려서 설명된 부분이 있었고 저런식으로 하면 쉽게 구현이 가능하다.

참고

• Advanced tutorial: CubeDial, a 3D Carousel made with GSAP - Blog - GreenSock
• https://codepen.io/GreenSock/pen/nHpec/
• https://codepen.io/GreenSock/pen/LVEXrB
• https://codepen.io/jamiejefferson/pen/kFhKE/

반대 방향으로 진행시 계산법

• https://codepen.io/GreenSock/pen/b99ec2f21dcd53ecd19c004744b0b6c1