Creating Generic Animations Using Context

Animations are a great way to add life to your animation, but it can be tedious and messy to have to create many animations that perform the same basic action for different objects. Luckily, Storyboard offers the ability to create generic animations that can be passed a context in which to perform the animation. This way the animation can be reused on many objects, as long as the object contains variables with the same names as those being altered by the animation.

Creating a Context-Based Animation

One of the most common uses of reusable animations is for button states. Rather than just a simple color data change, you may want an opacity fade or slight y-movement of the button for a little extra flair. First, create the animation for a single button:


You can see that the variables being changed are currently in relation to the specific object on which they were edited. To make this relative to the control on which the animation is triggered:

  1. Click “Change Variable” under the Animation Variable section in the Properties view for the animation step. Alternative Method: Change the Design Context of the animation to one of the controls that will use it, and click Yes when asked if you would like to apply the new context to existing steps:Screen_Shot_2019-05-30_at_11.07.18_AM.png
  2. Check the “Custom Key” checkbox.
  3. Change the key to just reference the control and variable name, using this format: ${control:variable_name}:


(Keep in mind that only the variable name will change to your specific variable. The rest will always be control:)

Now the animation step will look for the specified variable on the control from which the animation is triggered. This means that you could use this animation on any number of controls as long as they contain the same variable name and type. This is especially useful when creating components to be reused throughout your project or when using clone controls or tables.

Context-Based Animations with Tables

This generic method of creating animations is very effective when used in conjunction with tables because it allows you to use the same animation on all of the cells in the table. In this case, because table variables are specific to each cell, you must also reference the cell that the animation is being triggered from.

  1. Create another animation to fade the alpha variable of a control.
  2. Click “Change Variable” in the Properties view of the animation step.
  3. Check the “Custom Key” checkbox
  4. Change the key to reference the control and the cell before the variable name, using this format: ${cell:control:variable_name}


(Keep in mind that only the variable name will change to your specific variable. The rest will always be cell:control:)

Now you can add a press action to the table and call this animation. As long as you have setup a table variable with individual values for each cell, the animation should change the opacity of the cell that you press.

Passing a Context Via Lua

You may have a situation where you want to trigger a generic animation from Lua, if the value being changed is dependent on the situation. For instance, you may want to animate the y-value of a toggle button based on whether it is currently on or off.

  1. Create your toggle buttons:                                              Screen_Shot_2019-05-27_at_10.33.05_AM.png
  2. Create a y-variable for the button:                                              Screen_Shot_2019-05-27_at_10.37.49_AM.png
  3. Add a variable to hold the state of the toggle:Screen_Shot_2019-05-27_at_10.54.49_AM.png
  4. Create an animation to move the button to the bottom of the toggle and make it generic by changing the key to ${control:y}.
  5. Create a reversed animation to toggle the button back on.
  6. Add a press event to each button to call your toggle logic function.
  7. Write your toggle logic function to check the state of the button and call the appropriate animation depending on the button’s state, passing mapargs.context_control as the animation context:
--- @param gre#context mapargs
function cb_toggle_button(mapargs)
local control = mapargs.context_control
local state_var = string.format("%s.on_state", control)
local state = gre.get_value(state_var)

if (state == 1) then
    gre.animation_trigger("toggle_off", { context = control })
    state = 0
    gre.animation_trigger("toggle_on", { context = control })
    state = 1

gre.set_value(state_var, state)

Now when you press any of the buttons, their current state will be checked, and the appropriate animation will be triggered.



Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request



Please sign in to leave a comment.