Search
⌃K

Hero

Hero widget is a great out-of-the-box animation for communicating the navigation action of a widget flying from page to page. Hero animation is a shared element transition between two different pages.
The Hero Animation transforms the image's shape while it flies from one screen to another.
The steps to build the Hero Animation are as follows:
  1. 2.
    1. 1.
      ​Add Image​
    2. 2.
      ​Add Hero to Image​
Building Hero Animation requires you to have at least two pages that share the same image.

1. Creation of the first page

1.1 Add Gesture Detectore on First Page

To add an Gesture Detectore:
  • Create/Select the First page.
  • Select the Gesture Detectore widget from the Widget Panel.
  • Click on Actions + (on the right side of your screen).
  • Click on Action dropdown.
  • Find the Action Type dropdown and change it to Navigation.
  • Find the Gesture dropdown below and change it to OnTap.
  • Find the dropdown below and select Open page.
  • Finally in the Which Page? select the page that you want the user to sign in on once logged in.

1.2 Add Image

To add an image:
  • Select the Image widget from the Widget Panel.

1.3 Add Hero to Image

Two images on a different page must share a common Hero value.
To add a hero to the first image:
  • Before the Image select Add New Widget.
  • Select the Hero from the Widget Panel.
  • Move to the Property Editor (on the right side of your screen).
  • Add a value.

2. Creation of the second page

In the Pages section select New Page.

2.1 Add Image

To add an image:
  • Select the Image widget from the Widget Panel.

2.2 Add Hero to Image

Two images on a different page must share a common Hero value.
To add a hero to the first image:
  • Before the Image select Add New Widget.
  • Select the Hero from the Widget Panel.
  • Move to the Property Editor (on the right side of your screen).
  • Add the same value as the hero of the previous page.

​