Spline to Webflow: Gamechanger in Web 3D

Recently Webflow introduced native support for Spline at their latest conference in San Francisco. This is one of many important things they introduced, but for the sake of this article, we’ll cover only what Spline is going to mean in the future of 3D in web design.

‍

First things first, what is Spline?

For those who are not familiar with this great tool, Spline is a free 3D design software with real-time collaboration to create web interactive experiences in the browser. They are a newly formed startup, released just about 2020 and since then they have been growing rapidly.

They are well known among web designers and developers for their minimalistic interface and super simple way of creating interactive objects for websites. Now, since they have native support in Webflow, means that many web designers and developers will be using Spline for their work and we’ll see a lot more 3Ds on websites.

‍

Working with Spline

Let’s get your hopes straight, Spline is not a tool where you can do complex modeling with advanced lightning and texture settings. It’s not a tool for game character creation but a tool where you can use z-brush to sculpt real-life models, we’ll leave that to software made for that specifically, like Blender. 

Spline is a tool for simple models that you can use to lift up your web design/development game and explore your creative limits. At Broworks, Spline will now be a must-know tool in order to keep up with the rest of the design world.

‍

Spine features

Let’s take a look at some powerful features that Spline has to offer to a professional designer.

1. Modeling - Spline’s main strength is it’s modeling capabilities. They have some excellent character modeling, website animations, product visualization, and other applications. They have outstanding accuracy and everything is previewed in real-time without a need to wait for the render.
2. Effective rendering - They have a variety of beautiful materials and lighting effects. You can play around with different textures, shaders, and lighting schemes.
3. Animation - You can create great realistic interactions and dynamic movements. And all this can be easily added to your Webflow project with a simple code snippet or URL.

‍

Using Spline design in Webflow

Once you’re done with your modeling and animation in Spline, the next step is to add this in Webflow super easy, just by pasting a code snippet or URL.

‍

Using Code Snippet

If we use a simple code snippet, it works just like any piece of code in Webflow. We just paste it using the “HTML Embed” element and from there you can control it like any other code snippet with limited functionality of course.

‍

Using URL

This is a better way of using Spline design in Webflow since it gives you more freedom and flexibility. Once you get that URL from Spline, the next step is to add a “Spline Scene”, paste that URL and add a class to it in order to customize it. We’re not going to cover everything, it’s up to you to explore, but after that, you can go to interactions where you have a new interaction called “Spline” and from there you can select any layer created in Spline and animate it separately or the whole object all together. This is a super cool feature that we didn’t have before in Webflow which allows us to have better control over our work with 3D.

‍

We must remember that this is still a new feature and it is not all perfect, but it’s a step closer to much better 3D objects and interaction without writing a single line of code.