Lesson 01 of 05
Tweens & Easing
Smooth motion is a signal of craft. Choose easing like a composer chooses tempo.
TweenService animates any numeric or Color3 property. Ease-out for elements entering screen, ease-in for exits. Never use Linear easing for UI — it feels robotic and cheap.
The three most important easing styles for UI:
- Quart Out — general purpose. Fast start, gentle landing.
- Back Out — slight overshoot. Playful, springy. Use for popups.
- Quart In — slow start, fast exit. Use for dismissals.
luau
1local TS = game:GetService('TweenService')
2
3-- Button hover scale
4local function hoverIn(button)
5 TS:Create(button,
6 TweenInfo.new(0.18, Enum.EasingStyle.Quart, Enum.EasingDirection.Out),
7 { Size = UDim2.new(0, 220, 0, 56) }
8 ):Play()
9end
10
11local function hoverOut(button)
12 TS:Create(button,
13 TweenInfo.new(0.15, Enum.EasingStyle.Quart, Enum.EasingDirection.In),
14 { Size = UDim2.new(0, 200, 0, 48) }
15 ):Play()
16end
17
18button.MouseEnter:Connect(function() hoverIn(button) end)
19button.MouseLeave:Connect(function() hoverOut(button) end)
20
21-- Popup: Back Out for snappy feel
22local function openPopup(frame)
23 frame.Size = UDim2.new(0, 0, 0, 0)
24 frame.Visible = true
25 TS:Create(frame,
26 TweenInfo.new(0.3, Enum.EasingStyle.Back, Enum.EasingDirection.Out),
27 { Size = UDim2.new(0, 400, 0, 300) }
28 ):Play()
29end
READY · 29 lines