Slider to control animations

Is it possible to use a slider to control animations in the timeline? Similar to scrollytelling only with a slider. Is there already a script for this?

Original Post on Discord

by user 684154017479524352

You should be able to just set the time from the outside (e.g. from a slider). Have you tried?

No, I haven’t tried that yet. I’ll have to look for where I can find the parameters.

by user 684154017479524352

Here’s an example from the samples of how you can do it: needle-engine-samples/package/Runtime/Scrollytelling/Needle.Samples.Scrollytelling~/ScrollTimeline_2.ts at d94da6015b196b844203b84e1394ad05a55cd4ef · needle-tools/needle-engine-samples · GitHub
The timeline should be paused, set time and then evaluate to update the timeline

I haven’t made any progress with the slider controls, as I thought. I don’t know too much about that. But I’m just looking at the mixer. Seems to be the tool I need. But I can’t get it to work properly. Am I doing something wrong here?

by user 684154017479524352

Hi, which package are you using there? That’s not related to Needle Engine I’m afraid

When you asked about the slider did you ask about a slider for the website or for Unity?

I would like to change the properties and animations of a 3D object using a touch slide controller. This doesn’t necessarily have to be a UI slider. The slider is designed like a mixer.



image.png

by user 684154017479524352

The Timeline Mixer package won’t do anything in the web unless you write code for it tho. We don’t automatically export C# code to threejs.

By changing properties and animations you mean you want to fade in / out animations (that play in a loop) and properties are e.g. colors/metalness/roughness? Should the animation change those properties or should it be fully dynamic using your sliders?

The Timeline Mixer package won’t do anything in the web unless you write code for it tho. We don’t automatically export C# code to threejs.

OK, understood

By changing properties and animations you mean you want to fade in / out animations (that play in a loop) and properties are e.g. colors/metalness/roughness? Should the animation change those properties or should it be fully dynamic using your sliders?

Exat, that’s my goal

by user 684154017479524352

And the sliders should be 3D objects in the scene like in your screenshot that can be dragged
or HTML elements that can be styled wiht CSS etc?

It should be a 3D object. The UI Slider has never worked for me. the slider should also control the timeline from the director.

by user 684154017479524352

“Has never worked for me” you mean from a design perspective or technically?

An example, the slider cannot be seen in runtime. In other scenes it is visible to me, but you cannot “drag” it.

by user 684154017479524352

Ah you mean the Canvas slider. Yes the slider is not supported/implemented right now. A good indicator is if the Component has the blue “Needle Engine” label which points to the Typescript file. If you don’t see the label it is most likely not supported.

But I was talking about a HTML slider How To Create Range Sliders

That’s why I would like to solve the problem directly in the scene with a 3D object slider. There’s probably no easy solution to this, right?

by user 684154017479524352

There are a couple of possible solutions which depends a bit on what the goal is (e.g. on which devices should it work, should it work on VR/AR, mobile, desktop?, I assume it’s customer facing?)

Yes, the topic I’m working on is intended for a potential customer. I need to show different pipe diameters and flow speeds in a learning application. This is supposed to be interactive. This application should initially run in the desktop browser. If all else fails, I’ll have to create it with OPENGL from UNity.

by user 684154017479524352

Ok. Are you using any UI framework for the website (yet?)

no, We would like to integrate the needle scene via iframe. What I’m looking for is scrollytelling…but not with the mouse wheel, but with a slider.

by user 684154017479524352

So that I can understand this better. How do I get Neddle to work with the html slider? Do you have an example that I can learn from?

by user 684154017479524352