How do I add an Action to Animate elements?

There are a number of ways to add interactivity to your pages in Claro. For a complete list of available interactions see our How do I add interactions to my page? article.

To add an action to Animate elements:

  1. Select the element you want to have trigger the action or Insert a button. 
  2. Select the Interaction tab.
  3. In the Element Interactions section, select the Actions button drop-down list. 
  4. Select Animate from the drop-down menu. The Element Interactions panel will open.
  5. The panel has two list areas, Groups/Elements and Targets. If you have multiple groups, Groups is selected by default. If you only need to target a few items from a Group(s), select Elements from the pulldown menu.
  6. Select the Group(s) or elements you want to target and drag them to the Target list. Once the Group has been added, the elements within the Group will be highlighted on the stage area in a red dashed border.
    Note: You can use the usual Shift or Ctrl (command) shortcut keys to select multiple Groups or Elements in a list to drag them all together. It is highly recommended that you use this processes as opposed to adding the same action to multiple elements individually—too many individual actions can create issues in some browsers.
  7. You can choose an Effect: Bounce, Pulsate, Shake, etc. See Animate and Action Effects for more information.
    Note: If you select Move By, you must enter a positive or negative value for each coordinate to indicate how many pixels you would like added or subtracted from the elements original coordinates. Each additional trigger of the element will change the elements current coordinate by the same increments. 
    Note: If you select Move To, you must enter new coordinates for your target element. 
  8. Select the Trigger for the action (When clicked, When double clicked, When right-clicked, When mouse rolls over, When mouse rolls off, When trigger element shows, When trigger element hides).
  9. You can also select a Delay after which the action should occur after the Trigger event.
  10. You can also select a Duration for the event to determine the speed at which the transition will happen. A default duration will be added to every event when it is added.
  11. Input any Conditions you wish to evaluate.
    Note: For examples of operators you can use in the Conditions field, see: JavaScript Operators by
  12. Select Apply to commit your changes.
  13. You can then Preview the action right from the Element Interactions pane or Add another action to the element.
  14. Click Done when you are finished.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request