# Tạo hoạt ảnh cuộn 3D và tích hợp vào Framer - 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. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. 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

Spline 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: <https://inspired-walkthroughs-144071.framer.app/> 🌱 Thiết kế cây 3D (không có hoạt ảnh): <https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522>

\---

Khám phá thêm nhiều nhà sáng tạo và dự án tuyệt vời #MadeInSpline tại <https://community.spline.design/>

## 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

## Thuộc

- [Xuất và tích hợp trong Spline](https://spline.design/vi/academy/collections/export-integration-in-spline/create-a-3d-scroll-animation-integrate-into-framer)

## Hướng dẫn liên quan

[Tất cả hướng dẫn](https://spline.design/vi/academy/tutorials)

[Tạo hình khối chất lỏng 3D tương tác đi theo con trỏSpline 3DCơ bản12 phút](https://spline.design/vi/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)[Cách thêm tương tác Follow cho đối tượng 3DSpline 3DCơ bản6 phút](https://spline.design/vi/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Thiết kế website 3D với Spline và FramerSpline 3DCơ bản14 phút](https://spline.design/vi/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

[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.