Create a 3D Scroll Animation for Beginners – Spline + Framer 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....
🌱 3D Plant Design (no animations): https://app.spline.design/file/c4dc75...

00:00 Intro
00:18 Basic Exercise Using a Cube
01:20 A Look at the Scroll Event Settings
02:42 Adjusting the Play Settings for the Scroll Animation
03:06 Animating Leaf Growth
07:59 Adding Rotation to the Plant Animation
09:10 Adding Camera Movement
10:29 Exporting as Viewer
10:40 Embedding Your 3D Animation into a Framer Site

---

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

Links:
💖 Spline → http://app.spline.design
📚 Spline Docs → https://docs.spline.design

Our Social:
📷 Instagram →   / splinetool  
🎵 TikTok →   / splinedesign  
💙 LinkedIn →   / splinetool  
🐦 X →   / splinetool  
👾 Discord →   / discord