Add a Spline scene to your Webflow site

Spline is a tool for designing interactive 3D scenes. The Spline integration lets you paste your Spline scene and its events directly into Webflow. You can also animate your Spline objects in Webflow with Webflow’s native interactions.

In this lesson, you’ll learn:

1. How to create a Spline scene
2. How to add your Spline scene to your Webflow site
3. How to animate your Spline scene in Webflow

How to create and export a Spline scene

First, you’ll need to create a scene in Spline. To do so, go to Spline, create an account, and start designing! Check out Spline’s documentation or video tutorials for more information about how to design.

Once you have your scene created, you can export your scene:

1. Click Export in the Spline Editor toolbar
2. Go to Code Export
3. Copy the link at the top of the Overview tab (the link will have a “.splinecode” extension)

How to add your Spline scene to your Webflow site

Once you created and exported your Spline scene, you can add the scene to your Webflow site. Webflow has a native Spline scene element, which you can style like any other element (e.g., position, sizing, etc.).

To add your Spline scene to your Webflow site:

1. Go to Add panel > Media 
2. Drag a Spline scene element onto the canvas
3. Go to Element settings panel > Spline scene settings
4. Paste the Spline scene link (i.e., the link with a “.splinecode” extension) into the URL field

How to animate your Spline scene in Webflow

Now that your scene is integrated into your Webflow site, you can animate it with Webflow’s native interactions. 

To animate a Spline scene object:

1. Select the Spline scene on the canvas
2. Go to the Interactions panel
3. Choose an Element trigger or Page trigger
4. Follow the instructions for setting a custom animation up to Step 6
5. Choose the Spline animation from the Actions dropdown
6. Choose the object from Spline > Object dropdown 

Then, you can animate the Spline scene as you like. You can set the position, rotation, and scale (on all X, Y, and Z axes) of that object in the animation timeline. You can also adjust your action targets to determine which elements or triggers the animation affects.