UiTransition - A module script library of UI transitions!

I no longer will be updating this, if you find bug reply and I will fix it.

UiTransition is a module script containing transitions made from UI elements that can help disguise character teleportation’s, create death screens, and anything you would normally use UI transitions for.

Download v1.3.0 From GitHub

How To Use
Step 1.

Require the module!
Once you insert the module script into your gam- experience, parent it to somewhere like ReplicatedStorage.

Your code should look like this:

local UiTransition= require(game.ReplicatedStorage.UiTransitions)

Step 2.

Call the function!
You need to call the function from the module, with all the required parameters
The parameters are formatted as such:

  • String Name of the transition
  • Number duration of the transition animation
  • Number time for the script to wait before ending the transition
  • Color3 color of the transition
  • Function the function to be called once the first animation is complete
  • Player A player instance to run the function on (when called from the server)

Your code should look something like this:

local Function = function()
   print("foo")
end
--// Note, function not necessary
local UiTransition= require(game.ReplicatedStorage.UiTransitions)
UiTransition.Transition("CircleGrow", 1, 1, Color3.new(255,255,255), Function)

And that’s it!
To call from the server, just require an run the module from the server! A player argument is required, of course, so just put the player object after the function when running .Transition! MAKE SURE TO HAVE THE SCRIPT TITLED ‘StarterPlayerScripts’ IN STARTER PLAYER!

Transitions

More to come…

If you find any bugs or issues, let me know in the replies. Thanks!

Made by Chromatype
Free for commercial use, credit is not required but it is appreciated!
If you feel as though you wish to, you can donate here > Donation Place :O - Roblox

75 Likes

This library seems neat!, although I recommend adding a gif showcasing each transition in your post so we can easily see each one.

5 Likes

Can you add a mix function parameter (so basically halfway through the transition you can run a function e. g. Teleporting)

Will do! thanks for the suggestion!

1 Like

That’s already planned, but still, thanks for the suggestion!

1 Like

Take Version 1.1!

  • Fixed Circle Grow
  • Added Callback function
    (Calls halfway through the waitTime paramater)
wait(waitTime / 2)
	if callback ~= nil then
		callback()
	end
wait(waitTime / 2)

One thing to add, the function runs on the client so if something needs to happen on the server use a remote event

1 Like

This is fantastic. I don’t usually bookmark stuff but, this is going in my bookmarks. Solid work.

1 Like

Just a suggestion, but can you add a reverse CircleGrow?

2 Likes

Maybe you could add a manager/script that accepts a Player in the arguments, and executes it on the player?

Will do!

characterssssssssssssssssssss

If I’m understanding correctly, what you mean is to from the server execute a transition on a player.
This will be added in 1.2 (or maybe 1.3) but for now here is some code that should do this

--// Server
game.ReplicatedStorage:FindFirstChild("TransitionRemote"):FireClient(player, "CircleGrow", 1, 1, Color3.new(255,255,255))

--// Client
game.ReplicatedStorage:WaitForChild("TransitionRemote", true).OnClientEvent:Connect(function(name, duration, waitTime, color, callback)
	local uiTransition = require(game.ReplicatedStorage:FindFirstChild("UiTransition"))
	if callback ~= nil then
		uiTransition.Transition(name, duration, waitTime, color, callback)
	else
		uiTransition.Transition(name, duration, waitTime, color)
	end
end)

(untested)

But yes, native support for a function like this will be added.

Can we use this for commercial use? Nice resource though!

1 Like

Yeah, use this however you want.

Credit isn’t required but I do appreciate it!

Something you can consider supporting is the ability to apply transitions to (already made) UI.

Example:

local Function = function()
   print("foo")
end

--// Something like this
UI.Transition("CircleGrow", Frame, Function);

Just so it’s easier for people who want to apply these transitions to Images and whatnot.

Also, something else to consider is perhaps making a module for each transition. Would make it easier for you to go back and modify/fix.

Cool module!

1 Like

Something you can consider supporting is the ability to apply transitions to (already made) UI.
Just so it’s easier for people who want to apply these transitions to Images and whatnot.

It’s something I want to add, maybe in 1.2 but probably will be later down the line.

Also, something else to consider is perhaps making a module for each transition. Would make it easier for you to go back and modify/fix.

That and school is the reason 1.2 isn’t out yet, I’m making it into separate module scripts I could release what I have currently, but it doesn’t really call for it’s own version.

1 Like

Pretty cool but theres some issues…
image
The dot is from the circle transition


And this white border is from just having the module parented to a gui, Consider making the guis invisible when they aren’t used

Will fix!

I never even thought of that lolol, ofc it’ll be fixxed

Take Version 1.2!

Changes:

  • Fixed transition Ui’s visible when the module is parented to PlayerGui
  • Backend Upgrades (All transitions converted into module scripts, considerably easier to modify now)
  • Wrote a little script to call transitions from the server (See the OP)
1 Like

Classy, I like it! Thanks so much for making this library. All in honesty, godlike…

2 Likes

Yay! But please don’t make new models for every version, i really dont want to download a million versions :skull:

1 Like