How to use variables to create interactive 3D content in Spline

Hello everyone! In this tutorial, you will learn how to use variables in combination with Events and Actions to create custom interactive experiences on Spline!

0:00 Intro
0:27 What are variables?
1:00 Creating variables
1:57 How to use variables
3:00 How to move an object with variables and events
3:52 String variables and text
4:38 Dynamic variables (Time, Counter, Random)
6:56 Changing rotation with a counter variable
8:04 Reusing variable in multiple properties
8:25 Using a conditional action to trigger transitions
10:50 Capturing object properties changes
13:11 Making controls to move a cube
15:29 Bar chart logic with variables
18:13 Progress bar and math functions
20:26 Making a likes counter
22:19 Modifying shape properties with variables

[braidata]

Congratulations Alejandro and the team, from the support to the evolution of the App, inspiration as developers and a turning point in the development of 3D Web today.

[framespark]

This is so exciting. I didn't realise I'd been searching for something like this for a long time. I've been a 2D interactive designer for most of my career, in part because 3D has always been fairly non-interactive. This opens up a whole new world of possibilities for me and it's very nicely done and simple to understand so thank you!

[martinpalm]

I love it! Spline has the potential to become one of the user-friendliest game engines! Or even better... Make a separate app for making games that has a connection to SPline for assets!!!

[dingosmoov]

Excellent Tutorial, very happy for this feature!

[alecsciandra]

Been waiting for an update like this. amazing!

[Vlad]

Very cool, so much potential with this one. Can it be used in JavaScript to sync dynamic values from code and scene variables?

[mralexcheek]

This is so cool! I'm trying to build something like the last example, controlling the size of something with sliders, but I can't figure out how to lock the movement of my sliders to a "track" so that they don't move all over the place when I grab them. Where can I learn about this? Thanks community!

[ayechromatic]

This update is amazingg! Great job Spline team. Beautiful Job. You guys will transform the web

[Hendrik-Jan]

Amazing, thank you. Any chance there is an API for spline in the works so we can take controll and integrate with lots of juicy external solutions etc?

[denisgusev]

That's actually so cool! It opens up so much options for interactions... o_o Great job!

[eugenbuzuk]

why i can not connect variable to cloner params for example? it would be nice to connect it to any field

[travshirt]

I would love to know how you set up the windmill! That one looks awesome, but I don't quite understand how you changed the rotation speed.

[larrygust]

I've watched so many of these tutorials i feel like alejandro and I are friends.

[crunchoyt]

Hi Alejandro, I've seen that you don't use lights in order to show shadows or bouncing lights. Why is that? Why you use gradients and materials instead? Is it because of the file size and optimization? Are gradients and materials less demanding than a light? And a last question... Is there a way to make an emission material? Thanks

[alejmc]

This app came out of left field for me… had never heard of it.
Are there plans for the future to have ‘scripts attachments’ to those objects? So much functionality is already there via variables, actions, transitions, etc that a centralized scripting file sounds like a great next step. Is this made in Swift? Because then just like playgrounds on the iPad, that could be a natural fit.
Else something interpreted maybe like Python, Lua, who knows.
Enjoying these endeavors a lot.

[Liberati-tv]

Great tut thank you for the info! I'm hoping to see the ability for variables to work within objects in the ui editor. Currently i can't seem to be able to assign any variables.

[jamiediromero]

I gave the Like not only for the good Tutorial, but also for your great Tool! It is the perfect 3d-editor, animation tool and game engine for beginners! And not only in 3d, but also with a cartoon shader!

[matrixtomato]

its amazing what you can achieve with Spline

[TomPIT]

Hi Spline Team, this are some great news.
I am wondering if Spline can support the real-time data API integration as well? Imagine having a 3d scene showing current weather temperature conditions, or even better, 3d scene is updating in relation to the weather data (sun, rain)... Is this already possible?, YES, NO, in the pipeline. I am asking this especially because of the Apple vision Pro - Spline Mirror option where we see a BIG potential Enterprise for our needs in ERP segment.

[seanharbinger]

I can't wait to try these as form objects in Webflow...