# Membuat Animasi Scroll 3D & Mengintegrasikannya ke Framer - 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. [Tutorial](https://spline.design/id/academy/tutorials)
3. Membuat Animasi Scroll 3D & Mengintegrasikannya ke Framer

# Membuat Animasi Scroll 3D & Mengintegrasikannya ke Framer

Spline 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

## Bagian dari

- [Ekspor & Integrasi di Spline](https://spline.design/id/academy/collections/export-integration-in-spline/create-a-3d-scroll-animation-integrate-into-framer)

## Tutorial terkait

[Semua tutorial](https://spline.design/id/academy/tutorials)

[Membentuk Bentuk Fluida 3D Interaktif yang Mengikuti KursorSpline 3DPemula12 mnt](https://spline.design/id/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)[Cara Menambahkan Interaksi Follow ke Objek 3DSpline 3DPemula6 mnt](https://spline.design/id/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Mendesain situs web 3D dengan Spline dan FramerSpline 3DPemula14 mnt](https://spline.design/id/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

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