Box Trans Widget Tutorial


BoxTrans is a simple, yet powerful tool to transition on/off full screen backgrounds. The widget is procedural which optimizes the performance much better than if you were to build this manually within the Composer.


1 - Add the Box Trans Widget

Add the Box Trans Widget to your composition


The Box Trans Widget


2 - Set Recommended Initial Settings

When you first add Box Trans, there are two settings we recommend making immediately:

A. Navigate to the Animation tab in the Property Panel and set the duration of the animation to 2 seconds. This will make it easier to see the nuances of the settings as you configure BoxTrans.


Changing Animation Duration in the Animation Tab



The duration of the animation is set in the Animation tab, not within the widget. Also, it is not possible to have a different In and Out animation. Whatever you set will simply play in reverse. You can set a different duration for the out animation by turning on 2 timelines and having a shorter duration for the outbound animation.


B. The default size of widgets is 50% height and width. Go to the Transform tab and change both X & Y to 100% in the Size section.

TIP: A shortcut for doing this is simply hitting “R” on the keyboard when in the edit field. “R” Resets any numeric value to its default state.


Changing Size in the Transform Tab


2 - Adjust BoxTrans "Preset" Settings

Navigate to the BoxTrans tab to start testing the "Preset" settings

A. The Use Preset checkbox is off by default, so to test a preset, enable this checkbox. The Preset is a quick way to see some predefined settings for BoxTrans. It’s a great place to start.


Select "Use Preset" Option


B. Select any of the Presets from the dropdown box. Click on the In or Out buttons beneath the Output Window to view the preset.


Choose a Preset from the Dropdown Menu


TIP: at the bottom of the BoxTrans setting panel, there is a button called “Test”. This button quickly plays the On animation only. It is an easy way to quickly dial in settings.


Once you uncheck the "Use Preset" checkbox, it will change the style to a default state.


3 - Adjust Other Box Trans Settings

The other Box Trans settings can be adjusted when "Use Preset" is deselected to create your desired box transition.

"Stagger Settings" relate to the overall reveal of the various elements on/off across the screen.

"Animation Settings" apply to the animation of the individual element.

"Display" apply to the aesthetic appearance of the transition.


The Stagger, Animation and Display Settings


4 - Additional Tips

The following are some additional tips to help you when using this widget:

  • Setting your Rows/Columns in "Display" can give you many interesting effects from tiny grids to vertical and horizontal blinds effects. Combined with Scale, Rotation and Slide in "Animation Settings", you can create numerous dynamic effects.
  • Setting the timeline to the middle of your transition in the Animation tab allows you to interactively make changes to your box transition and see the results immediately rather than having to play it In/Out every time.
Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.