# Create a 3D Scroll Animation & Integrate into Framer (https://academy.spline.design/tutorials/create-a-3d-scroll-animation-integrate-into-framer)

> A video tutorial from the Spline Academy.

- Product: Spline 3D
- Level: beginner
- Duration: 12 min 27 s
- Published: 2025-03-30
- Video: https://www.youtube.com/watch?v=j5sEe5NQtUU
- Part of: [Export & Integration in Spline](https://academy.spline.design/collections/export-integration-in-spline.md)

## About this tutorial

In this tutorial, we’ll learn how to create a 3D scroll animation where a plant grows as the user scrolls. We’ll set up scroll events, add transitions, and incorporate camera movement. Finally, we’ll embed the interactive 3D scene into a website using Framer as our web builder.

👇Use the links below to remix the design shown in the video:

🪴 Website and Final Scene Remix: https://inspired-walkthroughs-144071.framer.app/
🌱 3D Plant Design (no animations): https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522

---

Discover more amazing creators and projects #MadeInSpline at https://community.spline.design/

## Chapters

- [0:00](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=0s) Intro
- [0:18](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=18s) Basic Exercise Using a Cube
- [1:20](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=80s) A Look at the Scroll Event Settings
- [2:42](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=162s) Adjusting the Play Settings for the Scroll Animation
- [3:06](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=186s) Animating Leaf Growth
- [7:59](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=479s) Adding Rotation to the Plant Animation
- [9:10](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=550s) Adding Camera Movement
- [10:29](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=629s) Exporting as Viewer
- [10:40](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=640s) Embedding Your 3D Animation into a Framer Site

## Related documentation

- [How state-based animation works](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll Event](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Integrating with Framer](https://docs.spline.design/integrations/integrating-with-framer)