How to make UI slide between the X axis inside a frame?

Help and Feedback Scripting Support
,
#1

Im trying to help make a plushie selling game with the same selling mechanic as this game.

How would I go about making the UI slide between the X axis inside a frame, like the one shown in the video.

1 Like
#2

You can use TweenService to tween the part from the left to the right. You should play around with the EasingStyle and EasingDirection until you get the desired result. I personally think it’s Enum.EasingStyle.Circular.

Then set the goal position on the other side of the Frame and set reverse in the TweenInfo to true. Then it’s a matter of looping it.

EDIT: Complete TweenInfo with @Orbular3’s addition:

local tweenInfo = TweenInfo.new(
	1, --//Duration of the tween
	Enum.EasingStyle.Circular, --//Combined with InOut EasingDirection, it will go from slow, to fast, to slow again
	Enum.EasingDirection.InOut,
	-1, --//Looping to -1 means infinitely looping. If the minigame finished, you will have to cancel this tween manually
	true, --//Reverses back to original position
)
1 Like
#3

To add to this comment:

  • Use InOut easing direction
  • Looping the tween is also a parameter in TweenInfo
1 Like
#4

We would use tween service to move the bar around

Here’s a little rbxm sample I made.
It moves the bar when you Press E
when you press Space it stops the bar and tells you at which section it is

image
image1620×612 110 KB

For__Generated_Scrxpt.rbxm (7.2 KB)

1 Like