Fade-ts - Easy to use fade module for complex GUIs

Hello developers,
when we start getting a bigger game our GUIs tend to get more dense too, making dificult to manage and taking too much time to make a easy transition between them. Well, I decided to start this project to solve it!

This project was originally written in roblox-typescript so you can find a link to the npm package in the instalation section.

· How it works

The syntax of the module is very simple:

local fade = require("//path to FadeModule lua file//")

fade.FadeOut(ParentFrame, 1.2)
fade.FadeIn(ParentFrame, .7)

In FadeOut() all the descendants of ParentFrame will tween all the transparency propierties in the time specified in the second argument, this case, 1.2 seconds. It will save the previus state of the properties in a attribute so when FadeIn() is executed and any of the elements had a BackgroundTransparency of 0.5 for example, it wont go all the way up to 0 but it will stop on 0.5.

All of this happens withouth breaking the main loop, so your code wont be restricted by this module

· Installing and using the module

If you want to use it in roblox-typescript dowload the npm module

To use it on roblox luau install this lua file and insert it into your game as a ModuleScript

Thank you for using this package and don’t hesitate to contact me if any bugs or problem appear.

See ya next time!


Sorry, but, can’t you just use a CanvasGroup? Does it do anything more than this?

The problem with CanvasGroup breaks scaling and UIPadding. I think this module is a replacement for it.

1 Like