How to replicate this transition animation in Roblox studio

Help and Feedback Art Design Support
, , ,
#1

Hello,
So I was wondering about how to replicate this type of transition animation that you can see from the splash screen onto a login screen. (https://i.gyazo.com/943a514e0f9f7c11d96fca4f344230ae.gif). Because I think that it is awesome to transition from one frame to another. I was researching Tweening of GUI, and that we can do something like this, but I am very new to it and I also wanted to note that the GUI frame isn’t as big as the screen + it would be a draggable frame. So what I would want to achieve is this very similar push of one frame to the side when a new frame comes.
Thank you for your replies :slight_smile:

1 Like
#2

Here’s what I see in that video.
The steps of the animation are already split into steps (an animatic), so I can describe it in steps.

1
The background image starts out in the middle of the screen.
In Roblox, it could be an ImageFrame.
Be sure to set up AnchorPoint such that the image stays in the middle even if the screen is resized.
Contain it in an invisible Frame whose size is 1,0,1,0 (full screen)

2
The background image zooms in and rotates.
This can be accomplished by Tweening both the Size and the Rotation of the ImageFrame.

3
The name of the app enters.
It could be a TextLabel, but your logo will likely be more stylized than just text, so it ought to be another ImageLabel. It is in front of the background, so its ZIndex should be higher than the background’s.
Tween the Position, Size and ImageTransparency of the logo.
Both the logo and the background are in the invisible frame.

4
The part with the background image is shrunk horizontally to shove it out, and dimmed. Tween the invisible Frame’s Size toward 0,0,1,0.
You can get away with just changing Size (not Position) if the Frame’s AnchorPoint is 0,0, so it’s stuck to the left edge of the screen.
To dim it, add a new Frame in the invisible frame that’s just black and Tween its BackgroundTransparency.
At the same time, the main screen pans in from right to the left; it is not resized, just panned. Tween its Position.
The main screen is the size of the screen, just like the other invisible Frame.

So now, how to Tween.
You need to use TweenService.
To Create a tween, you need to:

  • Specify the object whose properties you are tweening.
  • Specify how it tweens: the time the tween spans, the easing style (linear? fast, then slow down? bouncy?) etc.
  • Specify the properties that change and what they change to. Position? Color? Size? All of them?
local TweenService = game:GetService("TweenService")
local frame = script.Parent -- example

local tween = TweenService:Create(
	frame,
	TweenInfo.new(
		-- nothing. all defaults
	),
	{
		Size = UDim2.new(1.2, 0, 1.2, 0),
		Rotation = 20,
	}
)

print("Starting tween")
tween:Play()
tween.Completed:Wait()
print("Tween ended")
1 Like
#3

Thank you @Eestlane771 for a very detailed tutorial on how to do the animation. It’s really appreciated. I will definitely look into it :slight_smile:. Thanks again.