Update Animation Tutorial

Update Animations get triggered automatically when new data is pushed to a widget via a control node or data node. If an update animation is enabled, any new information entered in the control field (or pushed via a data node) will update with an animation of your choosing. This requires your widget to first be connected to a control node or data node.

For the purposes of this tutorial, add a text widget and then connect it to a control node. If you don't already know how to easily connect a widget to a control node, click here. 

1 - Enable Update Animation

First select your widget in the Composition Tree that you wish to have an Update Animation (this example uses a text widget). Next, enable an Update Animation by clicking the Update tab in the Property Panel and selecting "Active".

Update-Animation-Tutorial_1.gif

Enabling Update Animation

 

2 - Choose Out Update Animation Settings

Choose the desired Out Update Animation settings such as animation type, direction (if using translate), duration and power.

Update-Animation-Tutorial_2.gif

Choose Out Update Animation Settings

 

3 - Choose In Update Animation Settings

Choose the desired In Update Animation settings. You have the same options that you had for Out Update Animations.

Update-Animation-Tutorial_3.gif

Choose In Update Animation Settings

 

4 - Test

Test your settings by updating the contents of your text field within its Control Node in the Data Interface and Control Panel. With each update in text, your In and Out Update Animations will be triggered.

Update-Animation-Tutorial_4.gif

Test Update Animations

 

Note

Make sure your text is located where you want it to be in its bounding box. At first, you can see our scale Out Update Animation pulls the text slightly right (towards the center of the bounding box). Center the text within the bounding box and the scale on the Out Update Animation will remain centered.

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

Comments

0 comments

Please sign in to leave a comment.