Hey Developers, I’ve recently come across very interesting tweening throughout UIS. I’ve tried multiple ways to try to achieve smooth effects like these but I can’t seem to even get close. Here is the example that was provided.
by: @nana_kon
https://gyazo.com/d77a91a5546620064c5b8c96292f1cf2
The effects I"m talking about are like closing and opening the UIS
Simply use TweenService and tween the transparency. TweenService | Documentation - Roblox Creator Hub
Edit: You may also want to tween the size a bit to really add to it.
I Can say there is another equally efficient way to do this, which is to use a loop. :
for i = 0, 1, .1 do
and then set transparency to ‘i’
I recommend that you read these articles :
https://developer.roblox.com/en-us/recipes/Add-Fade-to-GUI-Elements
I prefer to use and recommend you to use TweenService because of all the prebuilt options, not to mention tweening size can get annoying using for loops.
I use TweenService for the UI, though, you might want to go for 0.3-0.4s duration, and with OutQuint as EasingFunction.
For the opening animation, I use Back
Thank you for replying, Did you use tweensize so it could stay in 1 spot and do the effect?
I used UIScale, it’s far much better.
The GIF example’s UI used TweenPosition and TweenService. I do not recommend using for loops in this case. An example code is given below:
script.Parent:TweenPosition(UDim2.new(0, 0, 0, 0), 'Out', 'Linear', 0.5)
The code above tweens the GUI element to the position, and the easing style is set to Linear and it takes 0.5 seconds to tween to the position
script.Parent:TweenSize(UDim2.new(0, 0, 0, 0), 'Out', 'Linear', 0.5)
The code above tweens the GUI element to the size, and the same settings as the position
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0), UDim2.new(0, 0, 0, 0) 'Out', 'Linear', 0.5)
The code above tweens the GUI element to the size, the second UDim2 is the position, and the same settings as the position. It tweens size and position at the same time.
local tween = game:GetService('TweenService'):Create(script.Parent, TweenInfo.new(0.5), {Transparency = 1})
tween:Play()
The code above tweens the GUI element’s (or any roblox part, not only for gui) transparency, it takes 0.5 seconds to do so. You can add more tween info, check the ROBLOX api.
Check the EasingStyles API to get a list of all easing styles.
And these are all involved in the effect correct?
A bit argumentative but the effect used solely TweenService as it is much easier to work with, about the GUI though, your code only tweens the frame, not the rest of the children. To achieve that, you need to use a for loop to get all the descendants, and then figure out which property they use, and finally tween it to a value.
Fyi, setting the AnchorPoint to 0.5, 0.5, and set the position to 0.5, 0, 0.5, 0 will make the effect much easier to deal with, especially if the UI can be dragged to anywhere, since the code you’ve sent above will set the UI position to a static place, where using the method I’ve mentioned above + Tweening UIScale will make the UI appear from the previous position, even though you can make it tween to the previous position, it will have more lines than doing the method I’ve suggested.