Display Items

Display Item functionality covers animations, effects and associated helper scripts that can be applied to UI controls to represent their different states and the transitions between them. This includes:

  • Buttons
  • Toggles
  • Sliders
  • Scrollbars
  • Dropdowns
  • Input Fields

You can also add the related effects and scripts to your own custom gameobjects by using the same animation triggers as as used by the above mentioned controls.


The standard display items mentioned above allow for adding an animation to control the display of the different states, and the transitions between them, by setting the Transition property to Animation and adding an Animation Controller with specific triggers. This includes support for the normal, highlighted, pressed and disabled states. Beautiful Transitions expands upon this by adding inactive and attention states, and gives you the scripts and animations for managing them.

The below shows the base animation controller for handling these additional states. This is located at \FlipWebApps\BeautifulTransitions\Animations\DisplayItem\DisplayItem

Animation Controller

To you these extra states on your display items, you should create an Animation Override Controller, select the above DisplayItem Controller and then select the animations that should represent the different states. This should then be added to your display item (e.g. Button gameobject).

You will find a couple of sample animation override controllers under \FlipWebApps\BeautifulTransitions\Animations\DisplayItem\  and also a number of different animations that you may use in the sub folders under \FlipWebApps\BeautifulTransitions\Animations\Shared\


To try out one of the sample animation controllers, just find something like a UI Button, set Transition to Animation, add an Animator component to the same gameobject and then drag one of the sample animation override controllers (e.g. DisplayItemScale) onto the Animator’s Controller field.


There are some scripts and helper classes that you will need to use to manage the additional states. The DisplayItemHelper class (in the FlipWebApps.BeautifulTransitions.Scripts.DisplayItem namespace) contains the methods to allow the following:

Setting a display items active state

To set a display items active state you should call the DisplayItemHelper.SetActiveAnimated method instead of the standard gameobject SetActive method. SetActiveAnimated will trigger the appropriate animation while maintaining the correct active state and handle activating or deactivating the gameobject at the appropriate point of the animation.

Setting the attention state

To set a display items attention state you should call the DisplayItemHelper.SetAttention method instead of the gameobject SetActive method. SetActiveAnimated will trigger the appropriate animation, maintain the correct active state and handle activating or deactivating the animation at the appropriate point


Display Item Demo – A simple demonstration showing how much of the above can be applied to buttons.

Additional Help

Please view the included demo’s under the \FlipWebApps\BeautifulTransitions\_Demo folder for examples and source code for implementing common scenarios.

If you need help or support then please visit our support forum, or let us know if you have any suggestions, feature requests or comments.