Spline
Talk to salesStart building

Create a 3D Scroll Animation & Integrate into Framer

Spline 3DBeginner12 min

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/

What you’ll learn

  1. 0:00Intro
  2. 0:18Basic Exercise Using a Cube
  3. 1:20A Look at the Scroll Event Settings
  4. 2:42Adjusting the Play Settings for the Scroll Animation
  5. 3:06Animating Leaf Growth
  6. 7:59Adding Rotation to the Plant Animation
  7. 9:10Adding Camera Movement
  8. 10:29Exporting as Viewer
  9. 10:40Embedding Your 3D Animation into a Framer Site

Related resources

Related tutorials

All tutorials
Shape Interactive 3D Fluid Shapes That Follow the Cursor

Spline 3DBeginner12 min

How to Add a Follow Interaction to a 3D Object

Spline 3DBeginner6 min

Designing a 3D website with Spline and Framer

Spline 3DBeginner14 min