How to makea smoother animation on guis

Help and Feedback Scripting Support
#1

i’ve been recently makign a pet hatchign system,and im trying to make the Pet Hatchign Animation Smoother any tips on how to

local function RainbowText(Text)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Text, tweenInfo, {TextColor3 = Color3.fromRGB(197, 0, 0)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Text, tweenInfo, {TextColor3 = Color3.fromRGB(197, 132, 20)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Text, tweenInfo, {TextColor3 = Color3.fromRGB(181, 197, 39)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Text, tweenInfo, {TextColor3 = Color3.fromRGB(35, 197, 76)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Text, tweenInfo, {TextColor3 = Color3.fromRGB(29, 40, 197)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Text, tweenInfo, {TextColor3 = Color3.fromRGB(35, 197, 76)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Text, tweenInfo, {TextColor3 = Color3.fromRGB(29, 40, 197)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Text, tweenInfo, {TextColor3 = Color3.fromRGB(29, 40, 197)}) tween:Play()
end

local function RainbowImage(Image)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Image, tweenInfo, {ImageColor3 = Color3.fromRGB(197, 0, 0)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Image, tweenInfo, {ImageColor3 = Color3.fromRGB(197, 132, 20)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Image, tweenInfo, {ImageColor3 = Color3.fromRGB(181, 197, 39)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Image, tweenInfo, {ImageColor3 = Color3.fromRGB(35, 197, 76)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Image, tweenInfo, {ImageColor3 = Color3.fromRGB(29, 40, 197)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Image, tweenInfo, {ImageColor3 = Color3.fromRGB(35, 197, 76)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Image, tweenInfo, {ImageColor3 = Color3.fromRGB(29, 40, 197)}) tween:Play()
	wait(.5)
	local tweenInfo = TweenInfo.new(.5, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 0 ) local tween = TweenService:Create(Image, tweenInfo, {ImageColor3 = Color3.fromRGB(29, 40, 197)}) tween:Play()
end

https://gyazo.com/84bf51a4a9452df0b83744fd12baf76a

#2

For starters, and as a general rule of thumb, you shouldn’t trust that an animation with .5 duration will take exactly .5 seconds, and likewise wait( .5 ) won’t necessarily wait .5 seconds. You should use events.

Tween.Completed event will tell you when a tween has completed. Tween.Completed:Wait() will pause until the event has fired.

Also, you don’t need to keep reassigning tweenInfo to a new TweenInfo with the exact same information. Just have 1 variable, possibly outside the function if it never changes.

Next, I’d try out different easing styles. Linear can be very sudden starts and finishes. Quad can be a nice one that eases into things to make it feel a bit more natural. Play around with easing style and easing direction to get the feel you’re after.

8 Likes