# Cipta Animasi Tatal 3D & Sepadukan ke dalam Framer - Eksport & Integrasi dalam Spline - Spline Academy (https://spline.design/ms/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)

> Dalam tutorial ini, kita akan belajar cara mencipta animasi tatal 3D tempat sebatang tumbuhan membesar apabila pengguna menatal. Kita akan menyediakan…

1. [Academy](https://spline.design/ms/academy)
2. [Kursus](https://spline.design/ms/academy/collections)
3. [Eksport & Integrasi dalam Spline](https://spline.design/ms/academy/collections/export-integration-in-spline)
4. Cipta Animasi Tatal 3D & Sepadukan ke dalam Framer

# Cipta Animasi Tatal 3D & Sepadukan ke dalam Framer

Pelajaran 4 daripada 8Spline 3DPemula12 min

Dalam tutorial ini, kita akan belajar cara mencipta animasi tatal 3D tempat sebatang tumbuhan membesar apabila pengguna menatal. Kita akan menyediakan peristiwa tatal, menambah peralihan dan menggabungkan pergerakan kamera. Akhir sekali, kita akan membenamkan adegan 3D interaktif ke dalam laman web menggunakan Framer sebagai pembina web kita.

👇Gunakan pautan di bawah untuk mengadun semula reka bentuk yang ditunjukkan dalam video:

🪴 Laman Web dan Adunan Semula Adegan Akhir: <https://inspired-walkthroughs-144071.framer.app/> 🌱 Reka Bentuk Tumbuhan 3D (tanpa animasi): <https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522>

\---

Temui lebih ramai pencipta dan projek hebat #MadeInSpline di <https://community.spline.design/>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=0s)
2. [0:18Latihan Asas Menggunakan Kiub](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=18s)
3. [1:20Melihat Tetapan Peristiwa Scroll](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=80s)
4. [2:42Melaraskan Tetapan Main untuk Animasi Tatal](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=162s)
5. [3:06Menganimasikan Pertumbuhan Daun](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=186s)
6. [7:59Menambah Putaran pada Animasi Tumbuhan](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=479s)
7. [9:10Menambah Pergerakan Kamera](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=550s)
8. [10:29Mengeksport sebagai Viewer](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=629s)
9. [10:40Membenamkan Animasi 3D Anda ke dalam Laman Framer](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=640s)

## Sumber berkaitan

- [Plant Growth ScrollTemplat](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 worksDokumen](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll EventDokumen](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Integrating with FramerDokumen](https://docs.spline.design/integrations/integrating-with-framer)

## Gambaran keseluruhan

- Spline 3D
- 12 min
- Pemula

## Seterusnya

[Benamkan Adegan 3D Interaktif ke dalam Laman Web Wix5 minPemula](https://spline.design/ms/academy/collections/export-integration-in-spline/embed-interactive-3d-scenes-into-wix-websites)[Teruskan](https://spline.design/ms/academy/collections/export-integration-in-spline/embed-interactive-3d-scenes-into-wix-websites)

[Spline](https://spline.design/ms)

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

- [Web](https://spline.design/ms/web)
- [iOS](https://spline.design/ms/ios)
- [Android](https://spline.design/ms/android)

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ms/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Penyelesaian](https://spline.design/solutions)

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

- [Terma & Syarat](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Hubungi

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.