What are the Animate Effects I can apply to element interactions or page actions?

There are a number of effects you can apply to element interactions or buttons in Claro (see Insert a button for more information). Action effects can be added to show, hide, or toggle elements. See the two page sample course, Effects, to view interaction effects applied to an image.

Effects can also be added to page actions.

Note: When choosing an effect, you can select the Preview button next to Effect pulldown menu. This will animate the effect's icon for a mini-preview to help you chose the an effect prior to application.

Action Effects

Fade: fades in or out

Slide: moves in from or out to the edge of the element’s borders

  • To the left
  • To the right
  • Up
  • Down

Fly: moves in from or out to the edge of the page

  • To the left
  • To the right
  • Up
  • Down

Blind: rolls down from the top or rolls up from the bottom

Clip: rolls up from the middle or rolls down from the middle

Drop: moves in or out like the slide but with a fade effect

  • To the left
  • To the right
  • Up
  • Down

Fold: rolls in from the top then folds down or rolls out from the bottom then folds up

Note: Certain networks have experienced issues with the Slide effect when used with rich media. If you are consistently experiencing issues when using Slide in conjunction with rich media, you may want to select an alternate effect such as Fade.

Animate Effects

Bounce: bounces up and down five times

Pulsate: pulses/flashes five times

Shake: shakes back and forth five times

Move By: moves the element a specific number of pixels from its current location (use a plus + or minus - in front of the number of pixels for the X and Y coordinates, e.g. "+100")

Move To: moves the element to a specific X and Y coordinate, e.g. "300")

Transparency: gradually changes the element's opacity to a value of your choosing.

Rotation: rotates the element stopping at the set value in degrees.

Scale To %: scales the element's Width and/or Height to the set percentage values.

Zoom To %: will zoom in or out on element by the set Height/Width percentages while respecting the elements original boundaries.

Pan and Zoom: allows you to perform the same function as Zoom To % with the added function of panning the element's coordinates by positive or negative pixel values.

Note: If you want an element to Move By or Move To in only one direction, check your element's current X/Y coordinates using Positioning on the element toolbar. Move By and Move To require a number in the Coordinates field.



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