# Membuat Animasi Scroll 3D & Mengintegrasikannya ke Framer - Ekspor & Integrasi di Spline - Spline Academy (https://spline.design/id/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)

> Dalam tutorial ini, kita akan belajar membuat animasi scroll 3D, tempat sebuah tanaman tumbuh saat pengguna menggulir halaman. Kita akan menyiapkan event…

1. [Academy](https://spline.design/id/academy)
2. [Kursus](https://spline.design/id/academy/collections)
3. [Ekspor & Integrasi di Spline](https://spline.design/id/academy/collections/export-integration-in-spline)
4. Membuat Animasi Scroll 3D & Mengintegrasikannya ke Framer

# Membuat Animasi Scroll 3D & Mengintegrasikannya ke Framer

Pelajaran 4 dari 8Spline 3DPemula12 mnt

Dalam tutorial ini, kita akan belajar membuat animasi scroll 3D, tempat sebuah tanaman tumbuh saat pengguna menggulir halaman. Kita akan menyiapkan event scroll, menambahkan transisi, dan memasukkan gerakan kamera. Terakhir, kita akan menyematkan scene 3D interaktif ini ke situs web dengan Framer sebagai web builder.

👇Pakai tautan di bawah untuk me-remix desain yang ditampilkan dalam video:

🪴 Remix situs web dan scene akhir: <https://inspired-walkthroughs-144071.framer.app/> 🌱 Desain tanaman 3D (tanpa animasi): <https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522>

\---

Temukan lebih banyak kreator dan proyek luar biasa #MadeInSpline di <https://community.spline.design/>

## Yang akan Anda pelajari

1. [0:00Intro](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=0s)
2. [0:18Latihan dasar dengan kubus](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=18s)
3. [1:20Melihat pengaturan event Scroll](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=80s)
4. [2:42Menyesuaikan Play Settings untuk animasi scroll](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:59Menambahkan rotasi pada animasi tanaman](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=479s)
7. [9:10Menambahkan gerakan kamera](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=550s)
8. [10:29Mengekspor sebagai Viewer](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=629s)
9. [10:40Menyematkan animasi 3D Anda ke situs Framer](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=640s)

## Sumber terkait

- [Plant Growth ScrollTemplate](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)

## Ikhtisar

- Spline 3D
- 12 mnt
- Pemula

## Berikutnya

[Menyematkan Scene 3D Interaktif ke Situs Web Wix5 mntPemula](https://spline.design/id/academy/collections/export-integration-in-spline/embed-interactive-3d-scenes-into-wix-websites)[Lanjutkan](https://spline.design/id/academy/collections/export-integration-in-spline/embed-interactive-3d-scenes-into-wix-websites)

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

Editor 3D dan 2D untuk tim dan agen mereka. Rilis ke web, iOS, dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Desain 3D](https://spline.design/id/3d-design)
- [Hana](https://spline.design/id/hana)
- [Omma](https://omma.build)
- [Pembuatan 3D dengan AI](https://spline.design/id/ai-generate)
- [Spline MCP](https://spline.design/id/mcp)
- [Spline Arena](https://spline.design/id/arena)
- [Harga](https://spline.design/id/pricing)
- [Enterprise](https://spline.design/id/enterprise)

#### Runtime

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

#### Aplikasi

- [Unduh](https://spline.design/id/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Unduh Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komunitas

- [Komunitas Spline](https://community.spline.design)
- [Blog](https://spline.design/id/blog)
- [Changelog](https://spline.design/id/changelog)
- [Pendidikan](https://spline.design/id/education)
- [Contra](https://spline.design/contra)
- [Afiliasi](https://spline.design/id/affiliate)

#### Perusahaan

- [Pelanggan](https://spline.design/id/customers)
- [Karier](https://www.ycombinator.com/companies/spline/jobs)
- [Keamanan](https://spline.design/id/security)

#### Legal

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

#### Kontak

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

© 2026 - Spline, Inc.