Also check out our Getting Started section for hands-on tutorials.

Here is a quick overview of what is new in Hero v2

• Simplified creation process
• Drastically smaller file sizes (optimised for banner ads)
• Less dependencies
• Click tag support (for banner ads)
• Two export modes: "All-In-One" (composition with multiple scenes) and "Multiple standalone projects" (e.g banner ad variations)
• Transfer animations (copy-paste)
• New timeline UI
• Animation shifter
• Optional jQuery for easier scripting
• Working with data
• Custom HTML Markup (e.g. Analytics, Fonts, Scripts, Libraries etc.)
• Artboard variations (beta)
• Video Export (beta)
• Free and Pro versions

We are working hard to improve Hero and fix problems when they occur. Here is a list of known issues and possible workarounds. If you found new issues please let us know: Report a bug

Elements are not rendered properly in export

Some complex elements cannot be exported properly. If you experience any export glitches and some complex elements are not rendered properly in the browser try exporting the affected layers as images (e.g. png). This usually solves rendering problems.

Use IDs carefully

Make sure you name your scenes and elements carefully and do not use the same ID for multiple elements. This will be problematic during export and the affected elements might not be rendered properly. If this happens check all elements for duplicate IDs.

Previewing your Hero compositions

Seeing your interactions and animations in action is important in the creative process. Hero outputs production-ready code that can be run in any web browser (e.g. Firefox or Chrome).

How to preview in Hero

Clicking Preview in the Hero panel starts the preview.

The first time you hit Preview the preview URL will be shown. Copy this URL and open it in a web browser. Now you should see the fully animated and interactive preview of your composition.

You only have set up the URL in the browser once per session. Once set up clicking Preview refreshes the browser automatically.

If you want to access the URL again you click the Preview URL button in the Hero panel.

Concept

In most animation authoring tools you have to create almost everything from scratch. That is cumbersome and very time consuming. Hero introduces the motto "Simple things should be simple. And if we can provide a shortcut we will."

That is why Hero comes with a pre-built and ready-to-use Effect System in addition to the more sophisticated animation timeline, that is more powerful and expressive but also more complex and time consuming.

All effects can be added with a single click to any element on your artboard. Every effect has it's default look and feel. In addition to that many effects have additional options to fine-tune the behavior. The Magnet Effect e.g. has the option scale to tweak the magnet intensitiy. A scale value of 1 would eliminate the effect while a value of 2 would be a very strong magnet.

See Effect Options.

Good to know

• In version 1 of Hero for XD effects are not bound to the timeline yet. This will change in the future.

• Some effects have requirements. The Glitch Effect e.g. can only be applied to images. There is a simple workaround for non-image elements though: You can use the export as option to convert any artwork and even groups to images during the export.

Animation Timeline

The Animation Timeline is an addition to the pre-built Effect System. Use the Animation Timeline for more complex and time sensitive animation choreographies.

How to use the Animation Timeline

Using the Animation Timeline is pretty straight forward:

1. Add the element you want to animate to the timeline
2. Add an animation track for the desired property (e.g. x, y or opacity)
3. Click on the animation track where you want to add the animation tween
4. Tweak start and end values and optionally set an Easing type
5. Optionally tweak the duration of the animation by dragging the end segment of the tween
6. To move the animation in time simply drag it horizontally

Controlling the timeline

There are two ways to control the timeline at runtime:

Via Timed Actions track

If you want the animation to stop at a specific time you can simply set a pause markers on the Timed Actions track by double clicking the track.

Via user interaction (action/script)

You can add an action to any element to control the timeline playback. Common use case is to control the timeline on click trigger.

Example: Pausing the timeline on click

// On element click
scene.timeline.pause();

Example: Play (resume) the timeline on click

// On element click
scene.timeline.play();

Example: Restart the timeline on click

// On element click
scene.timeline.play(0);

Export As

Hero tries to export every single element in the best possible way by default: Basic shapes will be exported as HTML tags (e.g. div containers) when possible. More complex shapes will be exported as inline SVG. You can also manually choose to export a specific element as an external SVG file. But keep in mind, that external SVG files do not support animations or interactions on elements within the external SVG file. Images will always be exported as images, but you can always choose between JPG or PNG.

Solving export issues

Some complex elements cannot be exported properly. If you experience any export glitches and some complex elements are not rendered properly in the browser try exporting the affected layers as images (e.g. png). This usually solves rendering problems.

Concept

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.

You can use multiple classes per element.

Layer/artboard names not starting with # or . are just for readability and will have no effect on preview/export code.

Use IDs carefully

Make sure you name your scenes and elements carefully and do not use the same ID for multiple elements. This will be problematic during export and the affected elements might not be rendered properly. If this happens check all elements for duplicate IDs.

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...

Concept

Web Attributes will be added when exporting/previewing. Adding custom attributes to your markup (HTML) can be necessary for more complex DOM manipulations or using 3rd party JavaScript libraries.

Examples:

• Setting custom CSS styles
  • style = border: 10px solid green; border-radius: 20px;
• Setting Hero Effects with options
  • hero-fx-magnet = {scale: 0.1}

In the settings section you can set three project wide settings:

• You can optionally include jQuery into your project (Hero Pro required). With jQuery you get access to lots of helper functions that you can use to create more complex compositions and sophisticated prototypes (e.g. load external data etc.)
• You can add click tag URLs for banner ads (Hero Pro required)
• You can add custom HTML Markup to the Head of the document (Hero Pro required). This can be used to add additional external scripts (e.g. analytics) and fonts.

The Companion desktop app helps you export your compositions as video (mp4). Companion App is still in beta. Hero Companion