Add a Spline scene to your Webflow site and animate it with interactions.
Spline is a tool for designing interactive 3D scenes. The Spline integration lets you paste your Spline scene and its events directly into Webflow, then animate your Spline objects 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:
- Click Export in the Spline Editor toolbar
- Go to Code Export
- 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:
- Go to Add panel > Media
- Drag a Spline scene element onto the canvas
- Go to Element settings panel > Spline scene settings
- 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 Interactions powered by GSAP.
To animate a Spline scene object:
Select the Spline scene on the canvas
Go to the Interactions panel
Create a new interaction and select the trigger type based on how you want your user’s interaction to trigger the changes to your Spline scene
Add a Spline action to your interaction’s timeline
If your Spline element is not already targeted, select it on the canvas
Click the “Set as target” button
Choose the object or multiple objects by selecting them from the objects dropdown. You can also modify properties for cameras and lighting.
Animate the Spline scene as you like. Refer to the sections below for all of the properties you can modify.
You can also add multiple Spline actions to your interaction to modify the same scene at different points on your timeline.
Object properties
You can set the position, rotation, and scale (on X, Y, and Z axes) of that object (or multiple objects) in the animation timeline. You can also adjust the opacity of the material used in the object(s), but note that if the material is shared, all instances of that material will be modified.
Object states
If your object has a defined state, you can animate to or from those states and modify properties on your objects.
Lighting properties
You can shift the lighting on your Spline scenes by editing the intensity, color, and position (on X, Y, and Z axes).
Camera properties
You can shift the camera on your Spline scenes by editing the zoom, position, rotation, and scale (on X, Y, and Z axes).