Create a 3D Scroll Animation & Integrate into Framer

Create a 3D Scroll Animation & Integrate into Framer

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/

#scroll#animation#spline#framer#3d#3d design#ui design#web design#interactive experiences#immersive 3d#tutorial#3d web#3d website#interactive 3d#tutorial-interaction#tutorial-ui-design#tutorial-events#simulation#scroll animation#scroll event#webdesign#framer website

What you'll learn

  • 0:00Intro
  • 0:18Basic Exercise Using a Cube
  • 1:20A Look at the Scroll Event Settings
  • 2:42Adjusting the Play Settings for the Scroll Animation
  • 3:06Animating Leaf Growth
  • 7:59Adding Rotation to the Plant Animation

Related resources

Overview

Spline 3D
12min
Beginner
Similar Tutorials
Spline V2 Full Tour: New Layout, Faster Creation, Agent Workflow

Spline V2 Full Tour: New Layout, Faster Creation, Agent Workflow

Video9minBeginner
Build Interactive Animations: Morphing UI & Reactive Glow in Hana (Step by Step)

Build Interactive Animations: Morphing UI & Reactive Glow in Hana (Step by Step)

Video13minBeginner
How to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks

How to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks

Video4minBeginner