Animated Slider for UI

How would I come about animating a slider toggle you’d find in your settings app, for dark and light mode, where there’s a smooth animation in the slider.

(I don’t care about changing the color of the background and stuff rn)
*moved to scripting section as I feel this is more to do with scripting


You would use tween service for this.

1 Like

You’d use TweenService, though when tweening because it’s a 2d object don’t use Vector3 instead use Udim2


Can I guess, tween colors, from (rgb) 45, 45, 45 to 20, 200, 20 for example?

Yes you can tween the colors to have it transition smoothly

Can I get a guide for this, on the dev hub maybe?

Of course here you go TweenService | Roblox Creator Documentation I hope this helps

Did this happen to help you? If not I could help you more

I am still doing some testing.

Bumping a topic cause I’ve recently made something for this:

You can use this if you want.

1 Like


You can simply learn the mechanism behind horizontal or vertical slider math here:

Then you should be able to replace the direction positioning with tween service for much smoother results.

According to the forum example he provided:

bar.Size =, as.X, 1, 0)

This could be turned into a tween instead for a cool animation effect.

game:GetService("TweenService"):Create(bar,--TweenInfo Here--, {Size =, as.X, 1, 0)})

Let me know if you found this example helpful for trying to test out your UI magic.

(Also, try learning about the components of tweeninfo in order to experience what other animations/styles you could do with it.)