Box Trans Widget

Boxtrans.png

BoxTrans is a 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.


To learn how to add a Widget to your Composition, click here. 

Remember, any underlined widget properties can be connected to a Control Node or a Data Node.

Property Settings

Screen_Shot_2020-01-08_at_4.01.51_PM.png

As seen above, select the "BoxTrans" tab in the Property Panel to update this widget's following property types: Preset, Stagger Settings, Animation Settings, Display and Text.

Note

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.

Preset

The Preset is a quick way to see some predefined settings for BoxTrans. It’s a great place to start. Check the "Use Preset" box to activate this property. Activating this overrides all other animation settings below. 

Screen_Shot_2020-01-07_at_2.32.11_PM.png

  • Preset - Various animation preset options including Side Rotate, Side Slide, Top Slide, Grid Spin, and Blinds.

Stagger Settings

These settings relate to the motion of the elements across the entire screen.

Screen_Shot_2020-01-07_at_2.32.16_PM.png

  • Origin - Origin of initial animated object such as Top Left, Center, Bottom Right, etc.
  • Overlap % - Overlap of staggered animations
  • Axis - Axis stagger: X, Y, Both
  • Ease Style - Ease style stagger such as Quad, Linear, Strong, etc.
  • Ease Method - Ease method stagger: In, Out, InOut

Animation Settings

These settings affect how the individual elements animate on/off.

Screen_Shot_2020-01-07_at_2.32.25_PM.png

  • Ease Style - Animation curve options. In other words, do your elements animate quicker or slower over time. Options include Linear, Cubic, Bounce, etc.
  • Ease Method - Where the Ease Style occurs: In, Out, In/Out
  • Scale Axis - Axis where the object scaling occurs: X, Y, Both
  • Scale (Start) - Initial scale of objects
  • Scale (End) - Final scale of objects
  • Transparency (Start) - Initial object transparency
  • Transparency (End) - Final object transparency
  • Slide X % - Object movement on the X axis over time
  • Slide Y % - Object movement on the Y axis over time
  • Rotation Axis - Axis where object rotation occurs such as X, Y, Z
  • Rotation Angle - Angle of object rotation over time

Note

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.

Display

These settings affect the shape, color and amount of elements as well as mapping of an image.

Screen_Shot_2020-01-07_at_2.32.33_PM.png

  • Image - Add an image
  • Column Count - Amount of columns 
  • Row Count - Amount of Rows
  • Start Color - Color selector for start of transition
  • End Color - Color selection for end of transition 

Note

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.

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

Comments

0 comments

Please sign in to leave a comment.