Transition Timer Tutorial

Follow

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. 

To follow along, navigate to the Singular Marketplace and select a theme 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.

Download a Composition from the Marketplace

 

Right click on your theme and select "Extract Composition".

Then open that Composition up 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.

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.

Toggle in/out Upper Right Overlays

 

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.

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.

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.

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.

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.