Transition Timer Tutorial

In this article, you will learn how to successfully utilize Transition Timers in order adjust when a transition animation within a single Logic Layer occurs. 

How to Download From Marketplace - To follow along, navigate to the Singular Marketplace and select a pre-built composition of your choosing. We have downloaded "How to - Midnight" as our example. You can also test the following walkthrough on a simple graphic built yourself.

Downloading_From_Marketplace.png

Download a Composition from the Marketplace

 

Open up the Composition to get started. To simplify, we deleted all the layers in "How to - Midnight" except for the two graphics in the Upper Right layer. This will more clearly demonstrate how the Transition Timer works.

Transition_Timer_Delete_Layers.png

Optional: Delete all but one Logic Layer

 

Now that we have one type of layer listed in our Composition Navigator, "Upper Right", let's begin.

1 - Get Familiar

Toggle in/out overlays within the "Upper Right" Logic Layer to understand the built-in transition.

Transition_Timer_Step_1.png

Toggle in/out Upper Right Overlays

 

Note

Before we begin, it is important to understand the three Transition Timer options we will discuss:

  • None: This is the default selection, no added Transition Timer
  • Auto: This is the selection that triggers an IN animation for the inbound graphic once the OUT animation is completed on the current graphic
  • Custom: This is the selection that allows users to input specific Positive or Negative variable delays

 

2 - Custom Option: Positive Variable Delay

Add a Five (5) Second Delay

To begin with, we will investigate how to add timed positive variable delay to our transition animation for a graphic within our "Upper Right" Logic Layer

 

2A - Select "Custom" Transition Time

Within the Composition Navigator, Select the Transition Timer icon on one of the graphics and select "Custom" from the dropdown menu.

Transition_Timer_Step_2A.png

Select the Transition Timer icon, select "Custom"

 

2B - Change Time to 5

Change the time to a positive value. We chose to enter "5".

How does this change work? Take in another graphic on this Logic Layer. Next take in the graphic with the 5 second delay we just added. The graphic will not come on until 5 seconds has passed.

Transition_Timer_2B.png

Change the seconds value to 5, test it

 

Congratulations, you just added your first Transition Timer and used the "Custom" option to add a timed positive variable delay!

 

3 - Custom Option: Negative Variable Delay

Add a Negative One (-1) Second Delay

We will now investigate how to add a negative timed delay to our transition animation for a graphic within our "Upper Right" Logic Layer.

 

3A - Select "Custom" Transition Time

Select the Transition Timer icon on one of the graphics and select "Custom" from the dropdown menu.

Transition_Timer_3A.png

Select the Transition Timer icon, select "Custom"

 

3B - Change Time to -1

Change the time to a negative value. We chose to enter "-1".

The great thing about Transition Timers is the user's ability to add a negative transition. Why would a negative transition time be necessary? In instances where you want a bit of crossover between your layer graphics, this feature is incredibly useful. 

Take in a graphic that does not have the negative timer. Now, take in the graphic that we just added the negative one second delay to. Do you see the crossover? What is cool about a negative transition time for this example is that it appears as though a new layer unfolds out of the old one.

Transition_Timer_3B.png

Change the seconds value to -1, test it

 

Congratulations, you just added your second Transition Timer using the "Custom" option to add a negative timed variable delay! Remember, negative timed variable delays are fantastic for adding crossover transition effects between two graphics.

 

The other two Transition Timer options can now be tested. See what "Auto" does to your layer logic and how selecting "None" reverts the layer logic back to its original in/out animation time. 

 

To recap, there are three dropdown options in Transition Timers:

  • None
  • Auto
  • Custom

Remember, Custom allows users to input Positive OR Negative Variable Delays. This was covered in steps 2-3. Play around with the different options to see which selection works best for your Logic Layer.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.