Announced at Webflow Conf 2023, the integration of Spline into Webflow brings together Spline's intuitive 3D modeling and the power of Webflow. For designers who want to give their websites a modern, interactive touch, this is very good news.
In practice, this Spline Webflow pairing combines the simplicity of Spline's 3D modeling with the robustness of Webflow. Designers can add a modern, interactive dimension to their websites.
What is the Spline integration in Webflow?
Spline, with its clean interface and 3D modeling tools, now integrates directly into Webflow. You can easily add interactive 3D elements to your website projects, with no complex code and no extra plugin. In short, no more headaches.
How do you integrate Spline into your Webflow projects? The step-by-step guide
1. Start with Spline
Sign up or log in to Spline and create your 3D element. You can also import an existing one.
2. Prepare your file for Webflow
A successful integration into Webflow starts with a well-prepared Spline file.
Name everything precisely
This is the foundation of any project. Make sure every element of your 3D creation has a precise name. It may seem basic, but it saves you a lot of confusion later on.
Turn on auto-zoom
In Spline's right panel, select your frame and turn on the Auto-zoom option. Your element then adapts to every device, and your users get a quality, immersive 3D experience.
Export smartly
Click Export, then in Play settings, choose Hide background to get an element with a transparent background. Also turn off the Orbit, Pan, Zoom and Soft orbit options for more precise control.
Save your changes
Remember to save your changes to keep your element's configuration.
Copy your element's link
In the Overview tab, copy your 3D element's link to use it in Webflow.
Watch your performance. 3D changes a lot, but it can slow down your website. Spline lets you monitor performance through Overview > Viewer > Performance > Run test. You get a performance audit and tips to improve it.
3. Integrate it into Webflow
Add your 3D element
Open Webflow, drag the Spline Scene element onto your page and paste your element's link into it. Give your scene a class so you can control it more easily on your website.
Animate it however you like
In Element trigger, in the right panel, choose the action that will trigger your 3D element's animation. You will find many options based on user interactions.
Customize the animation
Create a new animation and give it a name that clearly describes its action.
Integrate and animate
Select your Spline element and click the + next to Scroll action, then choose Integration > Spline.
Then go to the Object category to choose the element to animate.
Adjust and test
Set your element's default state, then try different states and animations. Test several animations to find the one that best suits your site.
Our tip. Turn on the Live preview is on option to see your changes in real time.
For a preview of the result, take a look at the Cohort website, built by Ouiflow.
In short
The Spline integration in Webflow is a technical update with a wider reach. It invites you to rethink web design. Tie your 3D element's action to scrolling, hovering over a button or a page change. There are many ways to make your website memorable. Designers have a real opportunity to stand out, innovate and build websites that are both functional and captivating. At Ouiflow, we look forward to using this pairing to make your websites even more striking and to push the limits of creativity.