Roblox TweenInfo Generator

The six parameters of TweenInfo.new

TweenInfo describes HOW an animation happens, not WHAT it animates (that is the goal, a table of properties). The parameters always come in this order: time (duration in seconds), EasingStyle (the acceleration curve), EasingDirection (where the curve acts), repeatCount (repeats after the first run, or −1 for infinite), reverses (whether it returns to the start before repeating) and delayTime (wait before starting). Only time is required; the rest have defaults (Quad, Out, 0, false, 0).

The EasingStyle defines the personality of the motion, Linear is constant, Sine and Quad are gentle, Exponential and Quint are sharper, and Back, Elastic and Bounce overshoot or bounce at the end. The EasingDirection chooses whether that effect appears at the start (In), the end (Out) or split in the middle (InOut). The tool implements exactly these equations, so the drawn curve is the one you will see in-game.

• time: duration in seconds.
• EasingStyle: the curve (Sine, Quad, Back, Elastic, Bounce…).
• EasingDirection: In, Out or InOut.
• repeatCount / reverses / delayTime: repeat, ping-pong and delay.

Two TweenInfos, from control to code

A button that "pops" as it appears, smooth and quick, uses a Quad ease out: TweenInfo.new(0.3, Enum.EasingStyle.Quad, Enum.EasingDirection.Out, 0, false, 0). The animation starts fast and slows at the end (Out), plays once (repeatCount 0) and does not reverse, the natural feel for UI entrances.

An icon floating in an infinite loop uses Sine with back-and-forth: TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true, 0). In a script this becomes: local TweenService = game:GetService("TweenService"); local info = TweenInfo.new(1, Enum.EasingStyle.Sine, Enum.EasingDirection.InOut, -1, true, 0); local tween = TweenService:Create(target, info, { Position = UDim2.fromScale(0.5, 0.5) }); tween:Play(). reverses = true with repeatCount = -1 creates the continuous float.

Choosing the right easing

For most UI, EasingDirection.Out with Quad or Sine gives the most natural result: things arrive fast and settle slowly. Save Back and Elastic for highlight moments (a reward pop-up, an attention-grabbing button), because too much of those effects gets tiring. Bounce is great for something dropping. Short times (0.15 to 0.4 s) keep the interface responsive; long times suit scene transitions and ambience.

TweenService interpolates on the client, so UI tweens and visual effects are cheap and smooth. To chain animations, connect the tween's Completed event and start the next one. And remember the goal accepts any animatable property (Position, Size, Transparency, Color3, Rotation, CFrame), as long as the final value is the same type. If you need a color, generate the Color3 in our Color3 Converter and use it directly in the goal.

• Natural UI: EasingDirection.Out with Quad or Sine.
• Highlights: Back/Elastic sparingly; Bounce for drops.
• UI times: 0.15 to 0.4 s to keep the response snappy.
• Chain animations via the tween's Completed event.