Buzzy

Download – TweenGUI Script

How To – Tween a GUI in Roblox Studio

What’s up everyone welcome to buzzygames, my name is BuzzyGamesBeth and today I’ll be teaching you how to Tween a GUI!

• Go ahead and watch my how to open and close your GUI before you watch this or you’ll be pretty confused. We’ll be adding on to the current script that we already have based on our previous video.
• This is what I mean by tweening. Right now, if I close and open my shop, there really isn’t an animation like it’s popping from the side top bottom. There really isn’t a fancy animation happening on and I want it to add a little spice to it.
• What i’m gonna go ahead and do is open up the localscript inside of my image button and all we’re going to do is just add into the script and we’re going to go ahead and set the tween position and the animation of this frame anytime we open up our frame.
• We’re going to go ahead and set our udim2 position. To find this, go ahead and head over to our workspace and this is going to be the position that I want my frame to end up at and then so what i’m going to do is head over to my frame position expand the x and y coordinates and go ahead and copy the x coordinates paste it there. Copy the y coordinates and then paste it inside of those parentheses and then make sure to go ahead and put a comma right outside of our parentheses as we go ahead and fill in the rest of the information.
• Now next up we need to go ahead and setup the easing direction! What is the easingdirection? Well that’s going to be the style of the animation that we want our tween to occur. Now if you head over to roblox’s website they actually tell you all the possible easing styles available and there’s going to also be a little example of how these animations are going to look like. Go ahead and find one that you like and then go ahead and set it.
• For me I want to go ahead and set the easing direction to out and then go ahead and set the it to back which is the animation and then i’m going to set it to 0.5 seconds for this entire animation to occur and I don’t want this thing to repeat, so i’ll set it to false.
• We want to make sure that we reset our frame so that anytime we close it, it[the frame] goes to the side of the screen. Head over to our localscript inside of the close text button go ahead type in frame.position = udem2 then move your frame to you outside of your workspace area. It’s a little off to the screen – perfect and then go ahead and copy the position of our frame of where it’s at right now.
• Expand the position copy the x and y coordinates and then once you’re done with this go ahead and make sure you untick visible!