%202.svg)
I gotta say, the new Spline X Webflow integration makes me more excited than bottom set maths when they know an answer (possibly their last) in a maths exam. (I was bottom set maths so I'm just speaking from experience people - shoutout to Mrs Hagget. Patience of a saint). I am making this website for my brother's podcast, Cosmic Cassette, at the moment (not finished by any means but from the homepage, you get the 3D experience).
One thing that I believe elevates a website and delights it's users is storytelling. It's not exactly an original idea but sometimes, the obvious ideas are worth saying again for the people at the back. What I'm saying is that when you combine incisive copy with 3D, you can create experiences that make users say wow.
An important question though is whether 3D is a necessity in creating a great website and, of course, the answer is "duh, obviously Sherlock," (that's meant to be sarcasm that hasn't translated well in to the written word - of course it's not necessary). As my boss, Kendra Rainey, has written about, there are different types of websites for different kinds of purposes and if Jeff Bezos suddenly had 3D shapes floating about on scroll on the Amazon website, it may do more harm than good. BUT, if you're focussing on making more introductory or enticement based websites, storytelling is a key feature.
Things we'll discuss in this article:
- What is Spline?
- How To Learn Spline?
- When To Use 3D in your websites (with examples)
- How to integrate Spline elements in Webflow?
- Conclusion
Alright, let's go.
What Is Spline?
Spline is the 3D tool you can actually use relatively easily. There are various different options for 3D modelling and motion like Womp, Blender and WebGl & Three.Js but I have found Spline a good balance between letting you have enough customisability while also being easy enough to use quite intuitively.You can collaboratively create basically anything in 3D from maps, characters, letters and even multi-scene games.
Then, you can export whatever you create as pngs or jpegs, or embed in your website for a multi-dimensional experience.The team has a insanely useful library of 3D examples you can simply use and manipulate and a spuriously active discord (wow, where did that work come from?) to support you in your development.Check it out the website here to have a gander.
This online tool has a generous free plan that allows you to try your hand at 3D before committing to a paid plan.
How to learn Spline?
I have found jumping in to Spline by just opening something in the Spline library and starting by editing colours and materials.
Next to that, the founders of Spline have put a real effort in to the Spline YouTube channel. It's insane to just build along with these chilled dudes explain in baby terms how to do things that will make your mum go "wow, you're so clever aren't you!" even though it took you about 5 mins and Alejandro just told you what to do.
Spline has also put together a killer notion doc to help Webflowers integrate Spline in to their Webflow projects.
Minh Pham also has an epic YT channel that has tonnes of tight, no bs tutorials that are great to learn from too.
Timothy Ricks (the legend) also has this killer tutorial which is a great starting point too:
Websites that use 3D Well
As Kendra Rainey from Edgar Allan explains in this article, the goal of enticement sites are:The goal of an introductory or enticement site is to introduce a brand and/or entice a person to connect with it.An important aspect of this is ensuring that there is "sizzle," in the website:So what you should spend your time on when you're creating this kind of site is storytelling, and sizzle. animation, graphics, beautiful design, interesting interactions, and, in many cases, lead capture, email, or otherwise.Now sizzle doesn't have to be 3D but it's a damn cool way of enticing people and bringing them in to connect deeply what you do to entice them to connect with your brand further.Some beautiful examples of 3D which delight and entice the user below!
Websites that use 3D Well
Bruno Simon
Hannah Dev
Check it here
Diego De Toda Oliveira
https://minrims-website.webflow.io/
Emili Lv
https://badges.framer.website/
Off Brand Agency
How To Use The Spline X Webflow Integration1)
1) Create Animation
Begin by creating a Spline animation, either using the community library or designing your own. Make sure in the top right, you click Reponsive for the size and AutoZoom to Yes! Once complete, click on export.
2) Export Animation
Now, you're in the driving seat. go to play settings, and turn orbit, pan, zoom and soft orbit off. You'll be doing the animations in Webflow so no need to mess around with that in Spline. Update Public URL after doing that.
3) Copy embed
Then, go to the viewer tab and copy the prod script at the top. It's literally one URL. Then update th viewer.
4) Throw in spline icon to Webflow
Back in Webflow, throw in the Spline Scene from the panel. Hot diggety we're close now. Whack in the URL in the settings and you should see your 3d model pop up!
5) Use native animations in Webflow panel
Now you can animate your Spline animation's individual features or the whole group itself. Very precise. Love it.
Conclusion
This is a killer addition to Webflow. With the power of Spline, websites that are simply next level are now available to us. I'm super excited to develop more and more interactive and thrilling websites and this is just the start. With AI prompting and AI style transfer in Spline features in Beta, who knows how quickly we will be able to influence how the future of the web looks. Incredible.ps.
Don't forget to check out these aweome docs to help you use Spline in future Webflow projects: https://docs.spline.design/integrating-with-webflow
Find this article thrilling, informative with a side dish of je ne sais crois? Why not sign up to my killer newsletter, the Webflail Roundup where there is this and more every week! Try it out for free here.
Read more
.webp)
.webp)
4 Free Weekly Webflow Resources
- 1 Article
- 1 Podcast
- 3 Webflow Jobs
- 3 Webflow Sites