# 3D kaydırma animasyonu oluştur ve Framer’a entegre et - 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. [Eğitimler](https://spline.design/tr/academy/tutorials)
3. 3D kaydırma animasyonu oluştur ve Framer’a entegre et

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

Spline 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ıç

## Ait olduğu kurs:

- [Spline’da dışa aktarma ve entegrasyon](https://spline.design/tr/academy/collections/export-integration-in-spline/create-a-3d-scroll-animation-integrate-into-framer)

## İlgili eğitimler

[Tüm eğitimler](https://spline.design/tr/academy/tutorials)

[İmleci takip eden etkileşimli 3D akışkan şekiller oluşturSpline 3DBaşlangıç12 dk](https://spline.design/tr/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)[3D bir nesneye Follow etkileşimi nasıl eklenirSpline 3DBaşlangıç6 dk](https://spline.design/tr/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Spline ve Framer ile 3D bir web sitesi tasarlamakSpline 3DBaşlangıç14 dk](https://spline.design/tr/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

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