How to animate a frame using Tweens with a proximity prompt?

Hello, I have 2 Proximity Prompts that open TWO different shops
(video below)

I do not have buttons that open the GUI

GUI structure and position: {0.5, 0},{0.5, 0}

image

HAT SHOP: (frame position: {0.5, 0},{0.5, 0})

image

I do know how to use Tweens, and so far I’ve chosen Out and Quart for this.

How can I animate it with Tweens using Proximity Prompts to open the GUI?

Thanks in advance.

3 Likes

It depends on how you want it to open specifically because you can do quite a bit with tweens to be very honest. Are you able to explain a little bit more on how you want the shop to open?

On a side note, this video (Roblox Studio - HOW TO MAKE A TWEENING GUI - YouTube) may help you, its only 5 minutes long but if there is any further assistance you need I’m happy to help! :smiley:

1 Like

I want it to open from up to the center position and then make it close by going up when you click the “X”

1 Like

✓ Possible Solution


Using Remote Events you can fire them every time the promo gets triggered to animate the UI.

Start the UI at UDim2.new(X,Offset, -1,Offset)

and Tween it into its position when the remote event gets fired.

Trigger Server-Sided:


ProximityPrompt.Triggered:Connect(function(plr)
    game.ReplicatedStorage.OpenShop:FireClient(plr)
end)

Open Client-Sided:


game.ReplicatedStorage.OpenShop.OnClientEvent:Connect(function()
    TweenService:Create(UI, TweenInfo, {Position = UDim2.new(X,Offset, Y, Offset)})
end)
1 Like

Can you explain it a little bit better? How would I fire the RemoteEvent and how would I start the UI?
I’m sorry if these are simple questions but I’m not a scripter

1 Like

Ok one sec, I’ll write a tutorial basically so give me a sec

1 Like

Ok, thank you so much man :pray: I’m kinda new to this

1 Like

This should be able to help you or give you a basic idea, insert this under your Shop frame and change the Variables.

local Frame = script.Parent -- Change to your frame
local ProximityPrompt = workspace.Part.ProximityPrompt -- Change to Proximity Prompt
local ExitShop = script.Parent.Exit


ProximityPrompt.Triggered:Connect(function(player)
	Frame.Visible = true
	Frame:TweenPosition(UDim2.new(0.5,0,0.5,0,"InOut","Linear",0.4,false))
end)

ExitShop.MouseButton1Click:Connect(function()
	Frame:TweenPosition(UDim2.new(0.5,0,-0.5,0),"InOut","Linear",0.4,false)
	task.wait(0.4)
	Frame.Visible = false
	
end)

Let me know if this helps or if you need further assistance.

1 Like

Nice! That works.
The animation seems to display after the second time the player opens the shop and is kinda laggy (I don’t know if that’s a studio thing or not) and the animation seems to not be working with the exit button.

local Frame = script.Parent -- Change to your frame
local ProximityPrompt = workspace.Lobby.Shopblock.Openshop -- Change to Proximity Prompt
local ExitShop = script.Parent.Exit


ProximityPrompt.Triggered:Connect(function(player)
	Frame.Visible = true
	Frame:TweenPosition(UDim2.new(0.5,0,0.5,0,"InOut","Linear",0.4,false))
end)

ExitShop.MouseButton1Click:Connect(function()
	Frame:TweenPosition(UDim2.new(0.5,0,-0.5,0),"InOut","Linear",0.4,false)
	task.wait(0.4)
	Frame.Visible = false

end)

image

1 Like

1. Setting up your Remote Event


In replicated storage, you should add your Remote Event.

Call it: “OpenShop”

2. Setting up the proximity prompt


Go to your proximity prompt script and inside you’ll write this:


local RemoteEvent = game.ReplicatedStorage.OpenShop --This is your remote event

local ProximityPrompt = script.Parent -- Your Proximity Prompt

ProximityPrompt.Triggered:Connect(function(plr) -- This will give you the player that triggered it
    RemoteEvent:FireClient(plr, "Shop") --Change the name Shop to Hat for the other proximity prompt
end)

3. Setting up the UI animation


local RemoteEvent = game.ReplicatedStorage.OpenShop

RemoteEvent.OnClientEvent:Connect(function(Shop)
    if Shop == "Shop" then -- Change shop to Hat in the other script
        local TweenService = game:GetService("TweenService")

        local myInfo = TweenInfo.new(0.5, Enum.EasingStyle.Quart, Enum.EasingDirection.Out)

        local Goal = {Size = UDim2.new(0.5,0,0.5,0)}

        local Frame = script.Parent.Frame

        local Tween = TweenService:Create(Frame, myInfo, Goal)
        Tween:Play()


    end
end)

Copy paste the exact same code for hat localscript!

2 Likes

The exit isn’t working because you opened the shop using the server script while the local script is trying to close it with the client (which it sees closed already)

2 Likes

As Don said, change the script to a local script and then paste this new code in, it should change the position before hand and work in a much smoother manner.

local Frame = script.Parent -- Change to your frame
local ProximityPrompt = workspace.Lobby.Shopblock.Openshop -- Change to Proximity Prompt
local ExitShop = script.Parent.Exit

Frame.Position = UDim2.new(0.5,0,-0.5,0)

ProximityPrompt.Triggered:Connect(function(player)
	Frame.Visible = true
	Frame:TweenPosition(UDim2.new(0.5,0,0.5,0,"InOut","Linear",0.4,false))
end)

ExitShop.MouseButton1Click:Connect(function()
	Frame:TweenPosition(UDim2.new(0.5,0,-0.5,0),"InOut","Linear",0.4,false)
	task.wait(0.4)
	Frame.Visible = false

end)
1 Like

That is way smoother now! But the exit animation still doesn’t work

Do you meant that the exit button doesn’t do anything at all?

It does close, but the tween animation does not display

Just Tween the UI but for Y do -1.5

1 Like

This might be because of the script in the Exit button, is that another script for it to close because if so, that may be the issue.

1 Like

Yup, it was! That seems to work fine.
Thank you! :pray:

1 Like