Sliding Sidebar with Tween Service

Help and Feedback Scripting Support
#1

Hey there!
So I was recently making a sidebar GUI following this (Advanced Roblox Studio Tutorial (Creating an Advanced Game Menu) PART 1 - YouTube). However, when I get to the scripting process, I don’t seem to get the desired effect; the sidebar won’t slide. Anyone knows how to solve it? Here is my code so far:

local Player = game:GetService('Players').LocalPlayer

Player.CharacterAdded:Wait()

local Tween = game:GetService("TweenService")


local Sidebar = script.Parent:WaitForChild("Sidebar")
local PlayBtn = Sidebar:WaitForChild("Play")
local CreditsBtn = Sidebar:WaitForChild("Credits")
local SettingsBtn = Sidebar:WaitForChild("Settings")
local Title = Sidebar:WaitForChild("Title")

local SlideOutSide = Tween:Create(Sidebar,TweenInfo.new(0.4,Enum.EasingStyle.Quad, Enum.EasingDirection.Out, 0, false, 0),{Position = UDim2.new(0,0,0,0)})
local HoverOverPlayBtn = Tween:Create(PlayBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
local HoverOverCreditsBtn = Tween:Create(CreditsBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
local HoverOverSettingsBtn = Tween:Create(SettingsBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
1 Like
#2

you have to actually play the tweens using :Play()

Example: SlideOutSide:Play()

2 Likes
#3

Do I have to add that at the end of the script? Or where do I have to add it?

1 Like
#4

You need to add it after you have created your tween. So pretty much at the end of the script.

1 Like
#5

Yup, did it like that, but still not working for some reason

local SlideOutSide = Tween:Create(Sidebar,TweenInfo.new(0.4,Enum.EasingStyle.Quad, Enum.EasingDirection.Out, 0, false, 0),{Position = UDim2.new(0,0,0,0)})
local HoverOverPlayBtn = Tween:Create(PlayBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
local HoverOverCreditsBtn = Tween:Create(CreditsBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
local HoverOverSettingsBtn = Tween:Create(SettingsBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})

SlideOutSide:Play()
1 Like
#6

you have to do the same for all of your tweens, forgot to mention that.

#7

I am sorry if I take too much of your time, but it is still not working, even after adding play to all.

local SlideOutSide = Tween:Create(Sidebar,TweenInfo.new(0.4,Enum.EasingStyle.Quad, Enum.EasingDirection.Out, 0, false, 0),{Position = UDim2.new(0,0,0,0)})
local HoverOverPlayBtn = Tween:Create(PlayBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
local HoverOverCreditsBtn = Tween:Create(CreditsBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
local HoverOverSettingsBtn = Tween:Create(SettingsBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})

SlideOutSide:Play()
HoverOverPlayBtn:Play()
HoverOverCreditsBtn:Play()
HoverOverSettingsBtn:Play()
#8

are there any errors in the output?

#9

No, it only returns the save file; no error

#10

I see no line where your tweens are supposed to play, you should get the player mouse and make an event for MouseForward and MouseBackward (Mouse scroll)

This only plays the tween once when the script runs.

Instead you should do something like:

local Player = game:GetService('Players').LocalPlayer
local Mouse = Player:GetMouse()

Player.CharacterAdded:Wait()

local Tween = game:GetService("TweenService")


local Sidebar = script.Parent:WaitForChild("Sidebar")
local PlayBtn = Sidebar:WaitForChild("Play")
local CreditsBtn = Sidebar:WaitForChild("Credits")
local SettingsBtn = Sidebar:WaitForChild("Settings")
local Title = Sidebar:WaitForChild("Title")

local SlideOutSide = Tween:Create(Sidebar,TweenInfo.new(0.4,Enum.EasingStyle.Quad, Enum.EasingDirection.Out, 0, false, 0),{Position = UDim2.new(0,0,0,0)})
local HoverOverPlayBtn = Tween:Create(PlayBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
local HoverOverCreditsBtn = Tween:Create(CreditsBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})
local HoverOverSettingsBtn = Tween:Create(SettingsBtn, TweenInfo.new(0.3,Enum.EasingStyle.Back,Enum.EasingDirection.Out),{Size = UDim2.new(1,0,0.1,0)})

Mouse.MouseBackward:Connect(function()
    SlideOutSide:Play()
end)
#11

I used MouseBackward for this one, I’m not sure which of your variables/tweens are supposed to use for scroll down or up.

And why are you making a custom sidebar/scroll? You can use ScrollingFrame.

#12

Oh, I didn’t know about this. Will try it out tomorrow, thanks!

1 Like
#13

Hello, I read the article, but it does not have the effect that I wanted to achieve. In the video that I mentioned, the sidebar slides (or shows rather than scroll) from one side, and that is what I wanted to achieve, but my code was not working. Any ideas?

#14

Oh, sorry, I thought you wanted a scroll bar, when do you want the sidebar to play the tween?

#15

Exactly; I would like for the sidebar to slide in, like in the vid

#16

I know, but when do you want it to slide in? Just so I can make a script for you that plays the tween when a certain event happens.

#17

Once the character finishes loading. That is why I used Player.CharacterAdded:Wait()

What I wanted to do, is that once the player loads in, the sidebar slides, and the player is able to see it. However, when I used my original script, the tween would not play

#18

Your player.CharacterAdded does nothing as of now, it’s an event that you will have to assign a function to it. (in this case)

There’s no line of code where the tweens are supposed to play, your’s is only creating the tween variables right now.

And you don’t have to tween every single UI, you can tween a single frame and it’s children will follow. (Unless you’re already doing that.)

Here’s how you should use .CharacterAdded in your script:

Player.CharacterAdded:Connect(function()
     SlideOutSide:Play()
end)

Make sure this code is ran after the tweens creation. (Put it in the bottom of the script.)

1 Like
#19

You can also add a wait() inside the function incase your game still loads.

#20

How did it go? Mark as solved if it worked for you. (mark a reply as solution if it worked for you.) Thanks. :slightly_smiling_face: