Transitions form the core part of the Beautiful Transitions asset and cover Screen, Camera, GameObject and UI elements. All of the transitions draw upon a common base. This page gives an overview of the common functionality and features shared between the different transition types and should be your starting point for an understanding of how Beautiful Transitions works.
You can also view the following pages for information about specifics details on these transition types:
You will find all transition components in the inspector Add Component menu under Beautiful Transitions.
To transition an object, just add the desired transition onto a GameObject. Apart from Camera transitions, there is no requirement that the transition is placed upon the transition target (the gameobject to be transitioned), although it is often simplest to do so. Multiple transitions can be added to perform simultaneous effects at the same time (e.g. fade and scale).
Transitions typically have 3 distinct states that they flow between; the transition in start state, the original state and the transition out end state. You configure the transition in and out states in the components and the original state is as setup in your scene. Depending on your scenario, you may chose to run just the transition in, just the transition out, or both in and out.
All transitions feature the same basic configuration options with additional properties for the specific transition types.
Init For Transition In
Setting this will initialise the transition to the transition in start state ready for transitioning in (e.g. if this is a scale transition the scale might be set to 0,0,0). You might typically select this option on all transitions that you want to run when a scene starts, or that shouldn’t appear until manually transitioned in.
This option will automatically run the transition in for the target.
Repeat When Enabled
By default ‘init for transition in’ and ‘auto run’ will only run in the gameobjects Start lifecycle state and so only happen once. If you are disabling and re-enabling a gameobject then you can enable this option to run the transition in subsequent OnEnable events.
Transition In / Out Config
A delay in seconds before this transition is run. Can be used to control the sequence when using multiple transition effects.
How long in seconds this transition will run for
The transition curve that should be used for the transition defining the effects progress over time. By selecting Animation Curve you can also specify your own custom curves.
Advanced – Transition Children
When the transitions are manually invoked through TransitionManager / TransitionHelper, this option determines whether to look for and invoke transitions on child gameobjects. Can be used to trigger multiple related transitions in one call. (see further below for more information)
Advanced – Must Trigger Direct
If this is a child transition located through the transition children option above, this option determines whether this should be transitioned automatically. In some cases you might have child transitions in your hierarchy that you want to transition separately or have more control over.
Events – On Transition Start
Here you can select any methods that you want to be called when the transition is started. You can hook these up to another transitions TransitionIn or TransitionOut method to chain trainsitions, some other built in method or your own custom code.
Events – On Transition Complete
Here you can select any methods that you want to be called when the transition is conpleted. You can hook these up to another transitions TransitionIn or TransitionOut method to chain trainsitions, some other built in method or your own custom code.
Transition Specific Configuration
Below the above standard options you will find configuration settings specific for the individual transitions which are documented separately with the description of each transition. Of these however, Target is a common option that when present can be used to target a different GameObject with the transition(leave to none to target the current GameObject).
Each of the transition components exposes the following public methods that you can invoke:
- InitTransitionIn() – Set the target into the transition in start state.
- TransitionIn() – Run the transition in.
- InitTransitionOut() – Set the target into the transition out start state (typically the original state).
- TransitionOut() – Run the transition out.
You can also access any of the public component properties and events as discussed above. See also the section on scripting for other uses and the TransitionHelper and Transition Manager classes below for simple ways of triggering transitions without the need to reference components directly.
The transition manager component allows for global scene and state management. In transitions can be run using the auto run property on the individual transitions, however out transitions need to be triggered manually. On TransitionManager you you can specify a list of gameobjects that contain transitions that should be run when you move to a new scene () and methods for invoking these as detailed below. If the list is empty, transitions on the same GameObject as TransitionManager will be used.
Transition Manager is a singleton and so along with any of its methods can be accessed through TransitionManager.Instance. It contains the following methods:
public void TransitionOutAndLoadScene(string sceneName)
Transition out using the default scene transitions, or if not specified then those on the same gameobject as TransitionManager. When done, load the named scene.
public void TransitionOutAndLoadScene(string sceneName, params UnityEngine.GameObject transitionGameObjects)
Transition out using transitions on the specified gameobjects then load the named scene
public void LoadSceneDelayed(string sceneName, float delay)
Load the specified scene after a delay.
Note: when running transitions through the API calls, any transition children and must trigger direct settings will be taken into consideration as discussed in scripting below.
We have already looked at some of the ways that you can access and control the component transitions through scripting. In addition the TransitionHelper class provides the following methods:
public static bool ContainsTransition(UnityEngine.GameObject gameObject)
Returns whether the specified gameobject contains any transitions.
public static List<TransitionBase> TransitionIn(UnityEngine.GameObject gameObject, Action onComplete = null)
Find and transition in any transitions contained on or as a child of the specified gameobject. Depending on the TransitionChildren and MustTriggerDirect configuration, any further children of these transitions will also be triggered.
public static float GetTransitionInTime(List<TransitionBase> transitionBases)
Get the amount of time that the specified transitions will take for a transition in.
public static List<TransitionBase> TransitionOut(UnityEngine.GameObject gameObject, Action onComplete = null)
Find and transition out any transitions contained on or as a child of the specified gameobject. Depending on the TransitionChildren and MustTriggerDirect configuration, any further children of these transitions will also be triggered.
public static float GetTransitionOutTime(List<TransitionBase> transitionBases)
Get the amount of time that the specified transitions will take for a transition out.
All transitions are based upon the abstract TransitionStep class that holds many of the values exposed through the transition components (see common components for a description of these values). A TransitionStep differs slightly in that it only represents a transition between two states (under the scenes, components actually contain 2 transition steps – one for the transition in and one for the transition out).
Currently the following TransitionStep classes are available Fade, Move, MoveTarget, Rotate, Scale, ScreenFade, ScreenWipe, TriggerAnimation.
Here we will touch on the key common features of TransitionStep. For further information please see:
- The documentation pages (GameObject & UI | Screen & Camera) for the different transition types which contain additional transition specific information.
- The API documentation.
- The TransitionStep.cs class which contains additional API documentation and comments.
- The provided scripting demo that shows how to perform all of the steps discussed below.
Creating a Transition
Creating a transition is as simple as instantiating the class for the transition that you want to use. The constructor supports many optional parameters so you can set the most common properties directly in the constructor. Please view the API documentation for the transition type that you wish to use for information on the available options.
// Create a fade transition using default values.
var transition1 = new Fade(targetGameObject);
// Create a fade transition specifying additional properties.
var transition2 = new Fade(targetGameObject, 0, 1, 0,4);
// Create a scale transition.
var transition3 = new Scale(targetGameObject, Vector3.zero, Vector3.one);
Setting Transition Values
TransitionStep contains all of the basic transition properties (e.g. Delay, Duration etc.) already discussed in Common Components above. These are available as public properties on the different transition classes along with additional transition specific properties. Many of the values can be set in the transition constructor. Again please see the API documentation for more details on what is available.
There are also several Setxxx() methods available that can be used for setting a property that return the TransitionStep. These can be used for chaining of calls (see below).
TransitionSteps feature the following methods for triggering different lifecycle states: Start(), Stop(), Pause(), Resume(), Complete(). You can use the properties IsStopped, IsPaused and Progress (range 0..1) to determine the current state.
// Create a fade transition using default values.
var transition = new Fade(targetGameObject);
// Start the transition.
Events and Callbacks
TransitionStep exposes OnStart, OnUpdate and OnComplete events that you can use to hook up your code with the different lifecycle states.
OnStart is called when a transition is started.
OnUpdate is called for every update frame.
OnComplete is called when the transition completes and features 2 versions; a parameterless callback and a version that will send user specified data to your event callback.
You can assign callbacks to the properties directly, or use the AddOnXXXAction() methods for simplicity.
// Add an additional complete action with custom data
transition.AddOnCompleteAction(LogComplete, "Complete Data");
void LogComplete(object parameter)
Debug.Log("Complete with parameter: " + parameter);
Chaining and Linking
Using the events discussed about it is very easy to link together transitions. Beautiful Transitions takes this one step further however by adding additional helper methods to create these chained transitions in an even simpler fashion.
As mentioned above there are additional SetXX methods that return the transition step. This allows things like the following:
// Create a move transition and chain setting of values.
var transition = new Move(targetGameObject).SetStartValue(Vector.zero).SetDelay(1).SetDuration(5);
Obviously here we could as easily have set the values in the constructor, however it gives an idea of how things work.
The real power comes from the extension methods that each of the individual transition types adds so you can chain different transitions together. These are documented fully on the separate documentation page for the specific transition types, however the methods typically start with the transition name.
// fade the gameobject in and when done scale out after 1 second
new Fade(targetGameObject, 0, 1, 0, 4).ScaleFromOriginal(Vector3.zero, 1, 3)
// fade the gameobject in while at the same time scaling in.
new Fade(targetGameObject, 0, 1, 0, 4).ScaleToOriginal(Vector3.zero, 0, 3, runAtStart: true)
In the above example, notice the runAtStart parameter. This indicates whether the chained transition should run when the proceeding transition completes (default), or at the same time as the proceeding transition starts.
One caveat is that as each such chaining method returns a TransitionStep, adding new transitions means something like the below will not work correctly as the Start() is being triggered on the last transition step rather than the first.
// This will NOT work correctly as start will only target the last scale
new Fade(targetGameObject, 0, 1, 0, 4).ScaleFromOriginal(Vector3.zero, 1, 3).Start():
There are a couple of ways around this. The first is to save a reference to the initial TransitionStep and use that. We can also use the fact that when chaining transitions in this way, the Parent property is set with the parent transition so we can also use this, or even better call GetChainRoot() which will return the first item in a chain.
// This will work but is a bit long winded.
var transition = new Fade(targetGameObject, 0, 1, 0, 4);
transition.ScaleFromOriginal(Vector3.zero, 1, 3):
// This is the easiest way.
new Fade(targetGameObject, 0, 1, 0, 4).ScaleFromOriginal(Vector3.zero, 1, 3).GetChainRoot().Start();
To automatially transition in just set the Init For Transition In and Auto Run flags on the transition. They will then be automatically run once the scene starts. See common components above for more details.
To manually transition in, you can use the TransitionHelper.TransitionIn() method. This method returns a list of TransitionBase items that were invoked which you can optionally pass to TransitionHelper.GetTransitionInTime() to get the number of seconds before all transitions will complete. See component scripting above for more details.
To automatially transition out, you will need to hook up the transitions TransitionOut method somehow. One way of doing this is to add the gameobject containing the transition to another (or the same) transitions OnTransitionComplete event and then select the Transitions TransitionOut method as the event callback method. You can enter an optional delay before the transition out should start. See common components above for more details.
To manually transition out, you use the TransitionHelper.TransitionOut() method. This method returns a list of TransitionBase items that were invoked which you can optionally pass to TransitionHelper.GetTransitionOutTime() to get the number of seconds before all transitions will complete. See component scripting above for more details.
You can add the TransitionManager component and invoke one of the TransitionManager.Instance.TransitionOutAndLoadScene() methods. The transitions that should be affected can either be added to the DefaultSceneTransitions property of the component in the inspector or pass in directly. TransitionOutAndLoadScene uses the TransitionHelper methods to transition out, but will also automatically load the specified scene after the out transitions are completed. See Transition Manager above for more details.
Transition Events Demo – A simple demonstration of component lifecycle events.
GameObject and UI Transitions Demo – A simple demonstration of gameobject and UI component based transitions.
Scripting Demo – A simple demonstration of calling and linking transitions through scripting.
Screen and Camera Transitions – Demo of the different screen and camera transitions.
Scene Swap – Demo using screen transitions to swap between scenes.
Please view the included demo’s under the \FlipWebApps\BeautifulTransitions\_Demo folder for examples and source code for implementing common scenarios. You can also refer to the API documentation for details on the Beautiful Transitions API.