# Tạo hoạt ảnh cuộn 3D và tích hợp vào Framer - Xuất và tích hợp trong Spline - Spline Academy (https://spline.design/vi/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)
> Trong hướng dẫn này, chúng ta sẽ học cách tạo một hoạt ảnh cuộn 3D, trong đó một cái cây lớn dần khi người dùng cuộn trang. Chúng ta sẽ thiết lập sự kiện…
1. [Academy](https://spline.design/vi/academy)
2. [Khóa học](https://spline.design/vi/academy/collections)
3. [Xuất và tích hợp trong Spline](https://spline.design/vi/academy/collections/export-integration-in-spline)
4. Tạo hoạt ảnh cuộn 3D và tích hợp vào Framer
# Tạo hoạt ảnh cuộn 3D và tích hợp vào Framer
Bài 4 / 8Spline 3DCơ bản12 phút
Trong hướng dẫn này, chúng ta sẽ học cách tạo một hoạt ảnh cuộn 3D, trong đó một cái cây lớn dần khi người dùng cuộn trang. Chúng ta sẽ thiết lập sự kiện cuộn, thêm chuyển tiếp và kết hợp chuyển động camera. Cuối cùng, chúng ta sẽ nhúng cảnh 3D tương tác vào website bằng Framer làm công cụ dựng web.
👇Dùng các liên kết bên dưới để remix thiết kế trong video:
🪴 Website và cảnh hoàn chỉnh để remix: 🌱 Thiết kế cây 3D (không có hoạt ảnh):
\---
Khám phá thêm nhiều nhà sáng tạo và dự án tuyệt vời #MadeInSpline tại
## Bạn sẽ học được gì
1. [0:00Giới thiệu](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=0s)
2. [0:18Bài tập cơ bản với một khối lập phương](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=18s)
3. [1:20Xem qua thiết lập của sự kiện cuộn](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=80s)
4. [2:42Điều chỉnh Play Settings cho hoạt ảnh cuộn](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=162s)
5. [3:06Tạo hoạt ảnh lá mọc](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=186s)
6. [7:59Thêm chuyển động xoay cho hoạt ảnh cây](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=479s)
7. [9:10Thêm chuyển động camera](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=550s)
8. [10:29Xuất dưới dạng Viewer](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=629s)
9. [10:40Nhúng hoạt ảnh 3D vào website Framer](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=640s)
## Tài nguyên liên quan
- [Plant Growth ScrollMẫu](https://app.spline.design/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer?redirect-duplicate-template-uuid=5f6456e9-ed1e-4f80-8ba5-a9c8a9ec9f5f&is-2d-file=false)
- [How state-based animation worksTài liệu](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll EventTài liệu](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Integrating with FramerTài liệu](https://docs.spline.design/integrations/integrating-with-framer)
## Tổng quan
- Spline 3D
- 12 phút
- Cơ bản
## Tiếp theo
[Nhúng cảnh 3D tương tác vào website Wix5 phútCơ bản](https://spline.design/vi/academy/collections/export-integration-in-spline/embed-interactive-3d-scenes-into-wix-websites)[Tiếp tục](https://spline.design/vi/academy/collections/export-integration-in-spline/embed-interactive-3d-scenes-into-wix-websites)
[Spline](https://spline.design/vi)
Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.
#### Hỏi AI về Spline
#### Sản phẩm
- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)
#### Runtime
- [Web](https://spline.design/vi/web)
- [iOS](https://spline.design/vi/ios)
- [Android](https://spline.design/vi/android)
#### Ứng dụng
- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)
#### Học
- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)
#### Cộng đồng
- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)
#### Công ty
- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)
#### Pháp lý
- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)
#### Liên hệ
- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)
© 2026 - Spline, Inc.