Someone explain to me GUI animations

Help and Feedback Scripting Support
,
#1

I don’t know if I am in the right place, since it is technically scripting but anyways.

Can someone tell me how to do GUI animations in simple words? And if there is an actual website that does explain GUI animations/ tweening in simple terms!!

#2

There’s an excellent official resource for creating GUI Animations that will get you started. The foundation of every GUI animation is the TweenService so get familiar with how to create and play tweens, as well as manipulating UI elements and how to interpret scale versus offset in UI elements.

Other than the documentation I couldn’t explain it better than the resources you can find on youtube or here in the dev forums. Try checking out gui tutorials from the community resources forum

#3

In simple terms : Gui go from point A to Point B

but I assume thats not what your looking for, Tweening is kind of complicated but all it is really is changing a value to another value in a smooth way using math, now how do I implement it? well I mean pretty much you define point A and then Point B, along side time, tell the code to run on the instance/value, so you’re asking how to do it so you need the correct formatting I’d assume well, your in luck.

So as said on the API we can use the “Tweenservice:Create()” this is defining the actual tween we will use; and then we have parameters (pretty much the things that the function requires like having a car require the right key, or type of gas; bad example ik but it works)
But the Parameters are as follows…

  • Instance (aka the part or object we are transforming/animating)
  • tweeninfo (which is pretty much a table that holds information that you need to provide e.g time, easing style(the curve of the speed of point A to Point B)
  • Property Table (this is probably the most confusing of the bunch but I can explain to the best I understand. Pretty much this is the information on “Point B” and where it is so that “Point A” can get there. (you didnt want complicated so im trying to keep it simple)

Code example :

-- we need to call this in order to actually use tweens (its like calling a module script so that you can use its functions)
local tweenservice = game:GetService("TweenService")

local Chip = script.Parent.Frame

-- this is the tweeninfo for the function we will use later. but the parameters go as | Time(Num) / EasingStyle(Enum) / EasinDirection(Enum) / Repeat Count(Num) / Reverses(bool) / DelayTime (Num)
local tweeninfo = TweenInfo.new(
	2, -- time
	Enum.EasingStyle.Bounce, -- this makes the curve bounce 
	Enum.EasingDirection.In, -- theres a whole page explaining these so im not gonna explain them all
	-1, --- this will repeat forever unless we stop it
	true, -- asking if it repeats
	0 -- delay
)


-- this is the information on "Point B" (PropertyTable)
local PropertyTable = {-- note on these brackets incase you don't understand them, this is how we defind arrays or tables in lua if you haven't learned about those yet There is stuff on the API which i will leave at the bottom of this.
	--- Udim2 is a 2 dimensional grid (aka your computer screen) this is for UI and such. yes i could explain it in a more complicated way but I wont.
	Position = UDim2.fromScale(1,.5), 
	Size = UDim2.fromScale(.5,.5)
	}
	
--- the function and putting it together
local Tween_Chip = tweenservice:Create(Chip,tweeninfo,PropertyTable)--- this is the function holding all of our information from our tables.

Tween_Chip:Play()
wait(20)
Tween_Chip:Cancel()

link to Udim2 : UDim2 | Roblox Creator Documentation

I hope I was able to help but I would like to note, If you hope to visualize your animations on screen, you may need a plugin for that or such cause this is the only way of doing UI animations to my knowledge unless you make your own functions to loop through stuff like that.

P.S : sorry for bad grammar I’m not pro.

#4

I an still confused lmaooo

(limit30thing)

#5

Sorry, but its a confusing topic.