# 3D kaydırma animasyonu oluştur ve Framer’a entegre et - Spline’da dışa aktarma ve entegrasyon - Spline Academy (https://spline.design/tr/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)

> Bu eğitimde, kullanıcı sayfayı kaydırdıkça bir bitkinin büyüdüğü bir 3D kaydırma animasyonu oluşturmayı öğreneceğiz. Kaydırma olaylarını ayarlayacak,…

1. [Academy](https://spline.design/tr/academy)
2. [Kurslar](https://spline.design/tr/academy/collections)
3. [Spline’da dışa aktarma ve entegrasyon](https://spline.design/tr/academy/collections/export-integration-in-spline)
4. 3D kaydırma animasyonu oluştur ve Framer’a entegre et

# 3D kaydırma animasyonu oluştur ve Framer’a entegre et

Ders 4 / 8Spline 3DBaşlangıç12 dk

Bu eğitimde, kullanıcı sayfayı kaydırdıkça bir bitkinin büyüdüğü bir 3D kaydırma animasyonu oluşturmayı öğreneceğiz. Kaydırma olaylarını ayarlayacak, geçişler ekleyecek ve kamera hareketini dahil edeceğiz. Son olarak etkileşimli 3D sahneyi, web sitesi oluşturucu olarak Framer’ı kullanarak bir web sitesine gömeceğiz.

👇Videoda gösterilen tasarımı remikslemek için aşağıdaki bağlantıları kullan:

🪴 Web sitesi ve son sahne remiksi: <https://inspired-walkthroughs-144071.framer.app/> 🌱 3D bitki tasarımı (animasyonsuz): <https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522>

\---

Daha fazla harika yaratıcıyı ve projeyi #MadeInSpline <https://community.spline.design/> adresinde keşfet

## Neler öğreneceksin

1. [0:00Giriş](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=0s)
2. [0:18Bir küple temel alıştırma](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=18s)
3. [1:20Scroll olayı ayarlarına bakış](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=80s)
4. [2:42Kaydırma animasyonu için oynatma ayarlarını düzenlemek](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=162s)
5. [3:06Yaprakların büyümesini canlandırmak](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=186s)
6. [7:59Bitki animasyonuna dönüş eklemek](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=479s)
7. [9:10Kamera hareketi eklemek](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=550s)
8. [10:29Viewer olarak dışa aktarmak](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=629s)
9. [10:403D animasyonunu bir Framer sitesine gömmek](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=640s)

## İlgili kaynaklar

- [Plant Growth ScrollŞablon](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 worksDoküman](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll EventDoküman](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Integrating with FramerDoküman](https://docs.spline.design/integrations/integrating-with-framer)

## Genel bakış

- Spline 3D
- 12 dk
- Başlangıç

## Sıradaki

[Etkileşimli 3D sahneleri Wix web sitelerine göm5 dkBaşlangıç](https://spline.design/tr/academy/collections/export-integration-in-spline/embed-interactive-3d-scenes-into-wix-websites)[Devam et](https://spline.design/tr/academy/collections/export-integration-in-spline/embed-interactive-3d-scenes-into-wix-websites)

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

Ekipler ve ajanları için 3D ve 2D editör. Web’de, iOS’ta ve Android’de yayınla.

#### Spline’ı yapay zekaya sor

#### Ürünler

- [3D Tasarım](https://spline.design/tr/3d-design)
- [Hana](https://spline.design/tr/hana)
- [Omma](https://omma.build)
- [Yapay Zekayla 3D Üretim](https://spline.design/tr/ai-generate)
- [Spline MCP](https://spline.design/tr/mcp)
- [Spline Arena](https://spline.design/tr/arena)
- [Fiyatlandırma](https://spline.design/tr/pricing)
- [Kurumsal](https://spline.design/tr/enterprise)

#### Runtime’lar

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

#### Uygulamalar

- [İndir](https://spline.design/tr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror’ı indir](https://spline.design/download-mirror)

#### Öğren

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/tr/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Çözümler](https://spline.design/solutions)

#### Topluluk

- [Spline Topluluğu](https://community.spline.design)
- [Blog](https://spline.design/tr/blog)
- [Sürüm Notları](https://spline.design/tr/changelog)
- [Eğitim](https://spline.design/tr/education)
- [Contra](https://spline.design/contra)
- [Ortaklık](https://spline.design/tr/affiliate)

#### Şirket

- [Müşteriler](https://spline.design/tr/customers)
- [Kariyer](https://www.ycombinator.com/companies/spline/jobs)
- [Güvenlik](https://spline.design/tr/security)

#### Yasal

- [Şartlar ve Koşullar](https://spline.design/terms)
- [Gizlilik](https://spline.design/privacy)

#### İletişim

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

© 2026 - Spline, Inc.