How to make a "zoom in" gui effect

So I’ve seen many GUI’s “pop out” of the screen when you click a button like in Forsaken. How can I start recreating that effect?

This is my first version and it doesn’t look good since the emote icons keep colliding with each other.


I’m working on a different game than this, so I need a better one.

1 Like

Can you send a video of some sort? I dont understand what your trying to make.

Imagine a camera looking at a picture… Move the camera closer it zoomed in … move the camera away and it’s zooming out.

1 Like

1 Like

Oh that isn’t zooming out … that’s a tween size effect. Let me do a few tests here.

This needs some love but it’s basically what you’re looking for.
Tween just needs to know where it’s going to end up and what is changing…
In this case it’s the size.

--LocalScript in StarterPlayerScripts
local player = game.Players.LocalPlayer
local gui = Instance.new("ScreenGui", player:WaitForChild("PlayerGui"))
local frame = Instance.new("Frame", gui)

frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame.Position = UDim2.fromScale(0.5, 0.5)
frame.Size = UDim2.fromScale(0.01, 0.01)
frame.BackgroundColor3 = Color3.new(1, 1, 1)
frame.BorderSizePixel = 0

local ts = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)

ts:Create(frame, tweenInfo, { Size = UDim2.fromScale(0.5, 0.5) }):Play()

I thought you were talking about a map popout at first.

So make your window in the UI how you want it to end up, that would be your settings for the tween. Starts from where it was and ends up where that window is at.

Here is a tutorial on that…
How to make an animated UI frame opening and closing module!
You don’t need ALL them locals, just put them in the tween line.
But this really explains how this is done.

3 Likes

the emote character dancing display looks like its using offsets, try changing them to scale. it might work

4 Likes

you should parent everything to one frame, and animate this one frame with tween service.

frame props should be:
size = 1
anchor point = .5
pos = .5
bg transp = 1