Repository navigation
Is there a way to programmatically transition states of objects? #212
Description
Great Tool!
But I have been facing a problem. I'm using spline in my next js app. So the idea is this, i show my model in the background. The base state has a static animation that is always running. I have another state that changes the view of model.
At the same time, i have other elements animating in my next site.
I am detecting user scroll or swipe in either up or down direction. If the direction is down or up, I show appropriate sections on my next js website. The problem is, i also want to animate my spline model with these scrolls or swipes.
I have not been able to find any programatic way to transition states so I have been relying on a hack. I have added a key up and key down event for keys that the user will probably not press. In my scrolling and swiping logic, I am forcefully emiting these events to keep spline synced with my website's animation.
But as you can see, this is merely a hack begging to be blown up any minute.
So my question is this, is there any way to programatically transition state? Either by accessing the model ref obj or by some other way?
Thank you!
Activity
bradleyDouglas commentedon Oct 8, 2024
@saram-astutesoftwares I'm in the same boat. Did you find a solution?
saram-astutesoftwares commentedon Oct 9, 2024
@bradleyDouglas no I wasn't able to find a valid solution.
But I was able to get it working in a roundabout hacky way.
I created a spline with two states i.e. a base state and an one animated state.
I added key down and key up events that transitioned from one state to the other and vice versa.
Then, in my next js application, i added event listeners for scroller/swiping where I detect direction of scroll. Based on the direction of scroll, I programmatically emit the keydown and keyup events.
In order to ensure that the user doesn't just randomly press the key associated with the keydown and keyup event on spline, I made the keydown events on spline match some random arabic letter. My audience is going to be english speaking, therefore there is a very slim chance of someone using arabic keyboard and pressing the key associated with spline.
I was able to do it this way, sure this is a hack but it works.
Spline needs to implement a way to programmatically change states as this is major use case IMO.
bradleyDouglas commentedon Oct 21, 2024
@saram-astutesoftwares FWIW, I ended up setting up animations of the state through the use of variables. Whenever I want to change the state, I just use the
setVariablemethod that runtime mentions.sdnyco commentedon Feb 8, 2025
Are there any planes to enable this one day?
It'd be amazing to programmatically set values (e.g. position, scale, rotation) and basic transition settings (e.g. transition duration, easing, etc.), rather than having to rely on states only.