Circular Transition Screen

Info
This is a module that you use to create cartoony transition screen. One of the most important aspect to have in simulator games or roleplay games are circular transition screens. It looks simple but elegant. This module will create a transition GUI, and play the animation. Hope it helps! :smile:

GAME LINK: Circular Transition - Roblox
Place File: Circular Transition.rbxl (52.1 KB)
RBXM File: CircularTransition.rbxm (6.6 KB)

Example Video:

Setup

  1. Download the Circular Transition Module
    2.1 Place in Replicated Storage
  2. You can paste this Example Code in the LocalScript for test
Example Code
local Module = require(game.ReplicatedStorage.CircularTransition).new(game.Players.LocalPlayer) -- Calling the module
local WaitTime = 3 -- Seconds

Module:play(WaitTime) -- Play the animation

API

API

:play(waitTime: number)

return nil

local Module = 
require(game.ReplicatedStorage.CircularTransition).new(game.Players.LocalPlayer) -- Calling the module
local WaitTime = 3 -- Seconds

Modudle:play(WaitTime) -- Play the animation

.getScreenGui()

return ScreenGUI

local Module = 
require(game.ReplicatedStorage.CircularTransition).new(game.Players.LocalPlayer) -- Calling the module

Modudle.getScreenGui() -- Returns transition ScreenGUI

Updates

1.0 - September 17, 2022
  1. Launch
  2. Bug Fixes

FEEDBACK

Please reply to this post, it would help me a lot. You can comment on my work, or I need to fix any bugs, or even just want help. I will be updating the module.

Thanks for reading :slight_smile: and hope this helped !!!

75 Likes

Could you open this on github so we can read the code on mobile?

4 Likes

YOO this is exactly what i needed thanks

2 Likes

Yea I will add that once I get the time, sorry abt that.

1 Like

Yea, I was in your shoes for many months.

3 Likes

Thank you, I was questioning how to correctly achieve this.

1 Like

Warp pipe sound plays Very cool resource. Thank you!

1 Like

Cool idea, just need to find sfx now :thinking:

1 Like

It seems like you wrote your code in roblox-ts, do you mind uploading it as an NPM package?

Oh no lol, I just used the roblox-ts playground to generate the lua class script, but now that u mentioned I will try to work on uploading an NPM package for this.

1 Like

Thank you so much, was looking for a script just like this!

1 Like

I made a better version (personally I think it’s better). Change the image to “rbxassetid://72813522573875” and add a UIStroke with the size to 999999.

Now all you have to do if make a function which scaled is to UDim.new(0.0008, 0, 0.0008, 0) in and UDim.new(3, 0, 3, 0) out.