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. You can then Preview the action right from the Element Interactions pane or Add another action to the element.
  12. Click Done when you are finished.

Interactivity and Animation

  1. How do I add interactions or interactivity to my page? Add links, actions, timed events, animations, hotspots, and image maps.
  2. How do I insert a Hotspot to add interactions?
  3. How do I add an action to an element that when trigger will Show or Hide or Toggle other elements (mouse event interaction)?
  4. Insert or add a pre-built button to a page (and edit it)
  5. How do I add an Action to Animate elements?
  6. How do I add a Swap Content Action to an element?
  7. How do I add a Light Box Action to an element?
  8. How do I insert a Text Input box on a page that learners can enter text into?
  9. How do I add an Action for Player Controls (Course Player navigation buttons: e.g., Forward, Back, Audio, Transcript buttons)?
  10. Media event actions and interaction (sync or time events to audio and video)
  11. What are the Animate Effects I can apply to element interactions or page actions?
  12. Adding a Link to URL using a modal target does not work for some sites (produces empty box)
  13. How do I add a link or hyperlink to a URL website, email or ftp site?
  14. How do I add a drag and drop interaction to my content page?
  15. How do I create an image with interactive hotspots?
  16. How do I allow the user to print a course page?
  17. How do I edit or remove an Action from an element on my page?
  18. How do I edit, delete, or remove Hotspots (Image Map) from an element?
  19. How do I get audio to play when a Hotspot or Action is triggered?
  20. How do I hide all mouse event targets on the stage? Hide Targets feature
  21. How do I make "hidden" hotspots? How do I hide the pointer hand cursor on a button?
  22. How do I make a page link to another page? How do I make branching interactions?
  23. Page, Jump, and Endscreen Transitions for a course (and Default Effect)
  24. Add an Entrance Effect to elements on a page
  25. How to Disable and Enable the Menu Button
  26. How do I add, edit and remove Actions within text elements?
  27. How do I add, edit and remove Links within text elements?
  28. Can learners search a course for specific content?
  29. What data does the course player search against during a course search?
  30. How do I display variables in my course?
  31. How do I make form fields available as variables?
  32. How do I set a custom variable?
  33. What are some of the Variables available?

Feedback and Knowledge Base