I am trying to create a Tween for my shop gui, I want to make it so when you click it, it comes goes from small to big. All I have so far is my Gui, with my ShopFrame and ShopButton (not assigned together) with a couple of localscripts. Can someone guide me through this from scratch? Ive tried watching a lot of tutorials but none of them seemed to have worked. Heres an example of what Im trying to get:
All help is appreciated, thanks!
Please refrain from making duplicate posts as it breaks the Official Rules of the Roblox Developer Forum.
I guess you can use some tweens like this,
button.Activated:Connect(function() --replace button with ur button name
frame.Position = UDim2.new(--[[make this the position of the middle of the frame]])
frame.Visible = true
frame:TweenSize(UDim2.new(--[[size u want of ur gui]]), Enum.EasingDirection.--[[blah]], Enum.EasingStyle.--[[blah]])
end)
put this in a local script.
you can just reverse this for the same effect but backwards.
P.S. I haven’t playtested this yet since studio is down for me so, apologies for any issues or spelling mistakes.
Alright, thanks!
Ill test it when roblox is back up.
It looks like since you probably typed it up in a rush, there were some errors. The animation does not work. This is what I have right now:
(I removed the brackets, so thats not the reason why it isnt working)
ok so, those 2 curly brackets in the UDims, ARE mistakes.
and the button and frame are supposed to be changed to ur button and frame.
Enum.EasingStyle. and Enum.EasingDirection., replace --[[blah]] with the easingStyle/Direction you want.
So If I want Elastic, and my frame is named ShopFrame and my button is named ShopButton, how would I adjust the script? My knowledge of scripting is extremely limited, so im sorry if im sort of unclear
where did you put the script exactly? what is it parented under?
I need to know this for the script.
The local script is parented under the ShopButton, and the ShopButton is parented under the ShopGUI. Is this an issue?
no not at all, just need it for the script.
script.Parent.Activated:Connect(function() --replace button with ur button name
script.Parent.Parent = UDim2.new(--[[make this the position of the middle of the frame]])
script.Parent.Parent.Visible = true
script.Parent.Parent:TweenSize(UDim2.new(--[[size u want of ur gui]]), Enum.EasingDirection.In, Enum.EasingStyle.Elastic)
end)
then replace the positions and sizes, yadda yadda.
The simplest way to make a transition like this is to insert a UIScale object into the frame, and then tween the UIScale’s Scale property.
Like this:
local uiScale = --reference UIScale here
local TS = game:GetService(“TweenService”)
function openTransition()
uiScale.Scale = 0
TS:Create(uiScale, TweenInfo.new(0.6), {Scale = 1}):Play()
end
function closeTransition()
TS:Create(uiScale, TweenInfo.new(0.6), {Scale = 0}):Play()
end
--use these functions where you need them
(I typed this on my phone so there might be some mistakes)
After adjusting the script you sent me, this is what I got:
script.Parent.Activated:Connect(function(ShopButton) --replace button with ur button name
script.Parent.Parent = UDim2.new(0.5, 0,0.5, 0)
script.Parent.Parent.Visible = true
script.Parent.Parent:TweenSize(UDim2.new(0.5, 0,0.5, 0), Enum.EasingDirection.In, Enum.EasingStyle.Elastic)
end)
But for some reason the animation isnt working. Did I do something wrong to the script maybe?
-Also how do I make it so when I send a script it sends it in that script text?
is the shopGui a frame or screenGui?
yes, the shopGui is a screengui.
so what is the frame called? Im assuming its in the screenGui.
The frame is called “ShopFrame” and yes, it is in the shopGui (screengui) and the “ShopButton” is also in the shopGui (screen gui). Also, idk if this has anything to do with it or not, but, the ShopButton isnt parented to the ShopFrame
this should work.
script.Parent.Activated:Connect(function()
script.Parent.Parent.ShopFrame.Position = UDim2.new(0.5, 0,0.5, 0)
script.Parent.Parent.ShopFrame.Visible = true
script.Parent.Parent.ShopFrame:TweenSize(UDim2.new(0.5, 0,0.5, 0), Enum.EasingDirection.In, Enum.EasingStyle.Elastic)
end)
this should work now, the other script i sent, i’ve editted this now and it should work. sorry for the error in this post before.
Alright im gonna test it right now
For simplicity sake I created a free model that has the skeleton of what your trying to achieve. Here
The skeleton looks like this:
I made it by Tweening a UIScale instance in shop from using Tween Service to get the scale in and out effect. I made sure that the shop had a anchor point of 0.5, 0.5 so it scales from the center and I added a debounce to the button to make sure that the animation plays smoothly.
local TweenSerivce = game:GetService("TweenService")
local Gui = script.Parent
local shop = Gui.shop
local UIScale = shop.UIScale
local button = Gui.button
local tweenInfo = TweenInfo.new(0.4, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
shop.Visible = false
UIScale.Scale = 0
local enabled = false
local debounce = false
button.Activated:Connect(function()
if debounce then return end
debounce = true
enabled = not enabled
if enabled then
shop.Visible = true
UIScale.Scale = 0
local tween = TweenSerivce:Create(UIScale, tweenInfo, { Scale = 1 })
tween:Play()
tween.Completed:Wait()
else
UIScale.Scale = 1
local tween = TweenSerivce:Create(UIScale, tweenInfo, { Scale = 0 })
tween:Play()
tween.Completed:Wait()
shop.Visible = false
end
debounce = false
end)