Hero Animations

When an image flies from one screen to another is called a Hero Animation. Hero refers to the widget that flies between screens i.e Image or CircleImage. The Hero Animation transforms the image's shape while it flies from one screen to another.
For example, a page that shows the list of products, clicking on the product's image flies the image in a new screen that shows the product details.
This page guides you on how to build a simple Hero Animation that looks like the following visual:
The steps to build the Hero Animation are as follows:
1.​Add Image on First Page​
2.​Add Image on Second Page​
3.​Add Hero Tag to First Image​
4.​Add Hero Tag to Second Image​
Building Hero Animation requires you to have at least two pages that share the same image.
1. Add Image on First Page
You can skip this if you already have an Image on the First page.

To add an image:
Create/Select the First page.
Drag the Image widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
2. Add Image on Second Page
You can skip this if you already have an Image on the Second page.

To add an image:
Create/Select the Second page.
Drag the Image widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
Set its width to infinity by clicking on the infinity icon (
) and height to 250.
Find the Path property and enter the same URL as the image on the first page.
Make sure to display the same image on both pages.
3. Add Hero Tag to First Image
A Hero Tag is used by Hero Animation to identify the images on two different pages.
Two images on a different page must share a common Hero Tag.
To add a hero tag to the first image:
Select the Image from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
Checkmark the Use Hero Animation (click on it). If the Image path is set from a variable, the image path will be used as a Hero Tag and you can skip the next step.
Under the Hero Tag dropdown, click on the Unset, and then select the + Add Hero Tag. This will open a popup.
Enter the Hero Tag name.
Click Add. The newly create Hero Tag will be added to the image.
4. Add Hero Tag to Second Image
To add a hero tag to the second image:
Select the Image from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
Checkmark the Use Hero Animation (click on it). If the Image path is set from a variable, the image path will be used as a Hero Tag and you can skip the next step.
Under the Hero Tag dropdown, click on the Unset, and then select the hero tag that you gave to the image on the first page. 

Last modified 1yr ago