3D 스크롤 애니메이션을 만들고 Framer에 통합하기

Spline 3D초급12분

이 튜토리얼에서는 사용자가 스크롤하면 식물이 자라나는 3D 스크롤 애니메이션을 만드는 방법을 배웁니다. 스크롤 이벤트를 설정하고, 트랜지션을 추가하고, 카메라 움직임을 넣어 봅니다. 마지막으로 웹 빌더인 Framer를 사용해 인터랙티브 3D 씬을 웹사이트에 임베드합니다.

👇아래 링크에서 동영상에 나온 디자인을 리믹스하세요:

🪴 웹사이트와 최종 씬 리믹스: https://inspired-walkthroughs-144071.framer.app/ 🌱 3D 식물 디자인(애니메이션 없음): https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522

---

더 많은 멋진 크리에이터와 프로젝트(#MadeInSpline)를 만나 보세요: https://community.spline.design/

배울 내용

  1. 0:00인트로
  2. 0:18큐브로 하는 기본 연습
  3. 1:20스크롤 이벤트 설정 살펴보기
  4. 2:42스크롤 애니메이션의 재생 설정 조정하기
  5. 3:06잎이 자라는 애니메이션 만들기
  6. 7:59식물 애니메이션에 회전 추가하기
  7. 9:10카메라 움직임 추가하기
  8. 10:29Viewer로 내보내기
  9. 10:403D 애니메이션을 Framer 사이트에 임베드하기

관련 자료

관련 튜토리얼

모든 튜토리얼