Include a Curve backdrop to your Webflow website

Spline is a software for crafting dynamic 3D settings. The Spline connection lets you embed your Spline backdrop and its occurrences directly into Webflow. You can also bring to life your Spline entities in Webflow with the native interactions of Webflow.

Throughout this guide, you will understand:

1. The process of forming a Spline backdrop
2. The method of attaching your Spline backdrop to your Webflow website
3. Animating your Spline backdrop in Webflow

Constructing and exporting a Spline backdrop

Initially, you must establish a backdrop in Spline. To begin, visit Spline, create an account, and commence designing! Refer to Spline’s manual or instructional videos for further insights on designing.

Once your backdrop is ready, you may export it:

1. Press Export in the Spline Editor toolbar
2. Access Code Export
3. Copy the link at the header of the Overview tab (the link will end with a “.splinecode” extension)

Adding your Spline backdrop to your Webflow website

Upon creating and exporting your Spline backdrop, you can insert the backdrop to your Webflow website. Webflow comes with a built-in Spline backdrop component, which you can customize like any other element (e.g., positioning, sizing, etc.).

To embed your Spline backdrop into your Webflow site:

1. Navigate to Add panel > Media 
2. Drag a Spline backdrop component onto the design area
3. Proceed to Element settings panel > Spline backdrop settings
4. Insert the Spline backdrop link (i.e., the link ending with a “.splinecode” extension) into the URL field

Animating your Spline backdrop in Webflow

Now that your backdrop is seamlessly integrated into your Webflow website, you have the flexibility to animate it using Webflow’s inherent interactions.

To animate an object in the Spline backdrop:

1. Choose the Spline backdrop on the design area
2. Access the Interactions panel
3. Select an Element trigger or Page trigger
4. Proceed per the guidelines to configure a custom animation up to Step 6
5. Choose the Spline animation from the Actions dropdown
6. Select the entity from Spline > Object dropdown 

Subsequently, you can finely tune the Spline backdrop as you desire. Manipulate the position, rotation, and scale (in all X, Y, and Z axes) of the object in the animation timeline. You can also tailor your action targets to determine the elements or triggers influenced by the animation.