â—€ HELP OVERVIEW
HERO HELP

Actions and Scripts

  1. With actions and scripts you can add interactivity and custom behaviors
  2. Actions (basic) are simple reusable command snippets
    • Play/pause a timeline
    • Load a scene
    • Trigger an effect
  3. Scripts (advanced) are custom code written in JavaScript
    • Use scripts to control your composition and elements
    • Load and render external data such as JSON, CSV, XML, GraphQL etc.
    • You can use vanilla JavaScript, jQuery and Greensock/GSAP

Concept

Actions and scripts are the powerful tool for creating engaging content and experiences. Here are the ingredients:

Triggers (When?)

Every action/script is linked to a so called trigger. This trigger defines when the action/script should be executed. When adding an action/script you can select one of the following triggers:

  • load: As soon as the scene/element is loaded (immediately)
  • click: When the host element is being clicked
  • toggle: (experimental)
  • hover: When the user hovers over the host element (triggers both: mouse enter and mouse leave)
  • mouse enter: When the mouse cursor enters the element
  • mouse leave: When the mouse cursor leaves the element

Actions and Scripts (What?)

When the trigger is set you can start adding actions/script. A good starting point is exploring the provided snippets drop down. Snippets are a collection of useful and popular actions that can be added with a single click. Some snippets need a little tweaking (e.g. entering element/scene IDs, setting URLs etc.)

Naming and Referencing

Often times an action/script requires a reference to another element or scene. In this case the target element/scene needs a unique ID or class name (CSS). Short version: Prefix the target element's layers name with # to set an ID or . to set a class.

Learn more about Naming and Referencing.

Naming Examples:

  • #graph
    • sets the element id to graph (e.g. <div id="graph"></div>)
  • .list-item
    • adds the class list-item to the host element (e.g. <div class="list-item"></div>)

Script Example with IDs:

  • player.loadScene('SCENE_ID');
  • scene.get('ELEMENT_ID');

Writing custom scripts

Scripts are powerful and an essential part of sophisticated and custom user experiences. Basic JavaScript knowledge is recommended. In this chapter we cover the essentials to get started with scripting in XD/Hero.

Default references (arguments)

In every script function you have access to default references:

  • player: The parent player that manages all scenes
  • scene: The current/parent scene of the host element
  • scene.timeline: The scene's timeline

Here are some script examples:

//---
// Stop the scene animation on click
// Trigger: On click
scene.timeline.pause()

More examples will be added soon...