FadeTransition | Create UI Transparency Transitions Easily

Hello, this module simply helps with creating UI transitions very easily without having to script it all manually. I’ve decided to make this module public as I’ve made enough improvements for performance. This is inspired by @Fizzitix’s Transitioner module (Original post) but it didn’t support UIStrokes and the original transparency wasn’t preserved if you spammed the function. Which lead me to create this.

Module: https://create.roblox.com/store/asset/15605691813/FadeTransition

:exclamation: Why use this over CanvasGroups?

If this wasn’t already obvious, CanvasGroup’s quality gets decreased if you decrease your graphics quality. This module fixes that by not using CanvasGroup whenever it’s not needed. (See video below to see the quality difference)

:grey_question: How to use

After requiring the module within your local script, this comes with two functions. Each will be explained in detail here.

Set(GuiObjects,Canvas)

Sets up your GuiObjects which can be ready for using the transition function.

  • GuiObjects : {GuiObject} | A table of GuiObjects you want to set
  • Canvas : boolean | An option to use CanvasGroups, true returns a dictionary of GuiObjects.

Transition(GuiObject,Fade,Info,Complete,Canvas)

Transitions the following GuiObject

  • GuiObject : GuiObject | The GuiObject to transition
  • Fade : boolean | Whether to fade it away or appear. true for disappearing, false for appearing.
  • Info : TweenInfo | The TweenInfo to use whenever tweening.
  • Canvas : boolean | Option to use CanvasGroup. Set this to true if it was setup with CanvasGroups in the previous function.

IMPORTANT: When reading the .Visible property on a gui, make sure to replace it with :GetAttribute(“Visible”) as the function changes the value. This returns true or false immediately once it begins transitioning.

Showcase

Here is a small video that shows all three guis tweening at once, each use a different method.

7 Likes

I didn’t saw any difference but um, sure i guess, this could be cool

1 Like