Skip to content

Commit 8849aa2

Browse files
pinkeshmarspinkeshmars
committed
Added hero animations
1 parent efe0454 commit 8849aa2

File tree

2 files changed

+177
-6
lines changed

2 files changed

+177
-6
lines changed

‎docs/ff-concepts/animations/animation_gifs/hero-animation-image-widget.gif

4.55 MB
Loading

‎docs/ff-concepts/animations/hero_animations.md

Lines changed: 177 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,189 @@
11
---
22
title: Hero Animations
33
sidebar_position: 3
4+
description: Learn how to add Hero Animations in your FlutterFlow app.
45
---
56

6-
## Hero Animation Overview
7+
# Hero Animation
78

89
"Hero" is a widget that gracefully transitions from one screen to another. For instance, on a product listing page, clicking on a product's image triggers a smooth animation where the image flies to a new screen, revealing detailed information about the product.
910

10-
To add a hero animation you'll need to have the widget present on two screens. On the first page, you'll need to use the Hero Animation checkbox in the properties panel. You'll specify a hero tag
11+
## Creating Hero Animation
1112

12-
On the second page, you
13+
Let's how to create hero animation with an example that looks like the one below:
1314

14-
<!-- Add diagram explaining hero animation -->
15+
![hero-animation-image-widget.gif](animation_gifs/hero-animation-image-widget.gif)
1516

16-
## How to create a hero animation
17+
:::info
18+
Building Hero Animation requires you to have at least two pages that share the same image.
19+
:::
1720

18-
<!-- Add arcade -->
21+
The steps to build such an example are as follows:
22+
23+
1. On the first page, select the image, head over to the properties panel, enable **Use Hero Animation**, and **Add Hero Tag**.
24+
25+
<div style={{
26+
position: 'relative',
27+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
28+
height: 0,
29+
width: '100%'}}>
30+
<iframe
31+
src="https://www.loom.com/embed/c20e589a20dd4dbfbcb975bf45af286e?sid=0300c1fb-e862-4ac7-9975-b1fc0df1a44e"
32+
title=""
33+
style={{
34+
position: 'absolute',
35+
top: 0,
36+
left: 0,
37+
width: '100%',
38+
height: '100%',
39+
colorScheme: 'light'
40+
}}
41+
frameborder="0"
42+
loading="lazy"
43+
webkitAllowFullScreen
44+
mozAllowFullScreen
45+
allowFullScreen
46+
allow="clipboard-write">
47+
</iframe>
48+
</div>
49+
<p></p>
50+
51+
2. On the second page, select the image, head over to the properties panel, enable **Use Hero Animation**, and select the **Hero Tag** that you created on the first page component.
52+
53+
<div style={{
54+
position: 'relative',
55+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
56+
height: 0,
57+
width: '100%'}}>
58+
<iframe
59+
src="https://www.loom.com/embed/8e51cd2ca0fb490cbf9ee607f07c8440?sid=a4686847-5136-41a1-a5d3-d410a8916ede"
60+
title=""
61+
style={{
62+
position: 'absolute',
63+
top: 0,
64+
left: 0,
65+
width: '100%',
66+
height: '100%',
67+
colorScheme: 'light'
68+
}}
69+
frameborder="0"
70+
loading="lazy"
71+
webkitAllowFullScreen
72+
mozAllowFullScreen
73+
allowFullScreen
74+
allow="clipboard-write">
75+
</iframe>
76+
</div>
77+
<p></p>
78+
79+
3. Add [navigation action](#) from page 1 to page 2.
80+
81+
82+
83+
## Hero Animation on Component
84+
85+
You can also add hero animation on a custom component. Let's see how to build an example that looks like the one below:
86+
87+
<div style={{
88+
position: 'relative',
89+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
90+
height: 0,
91+
width: '100%'}}>
92+
<iframe
93+
src="https://www.loom.com/embed/cf8980ca68074fd0a24ce2fbef3e0a11?sid=c5b3d22b-dde4-4df3-a600-0207cceb1c22"
94+
title=""
95+
style={{
96+
position: 'absolute',
97+
top: 0,
98+
left: 0,
99+
width: '100%',
100+
height: '100%',
101+
colorScheme: 'light'
102+
}}
103+
frameborder="0"
104+
loading="lazy"
105+
webkitAllowFullScreen
106+
mozAllowFullScreen
107+
allowFullScreen
108+
allow="clipboard-write">
109+
</iframe>
110+
</div>
111+
<p></p>
112+
113+
Before you begin,
114+
115+
- Make sure you have a component added to both the first and second pages.
116+
- For a smoother and more appealing hero animation effect, ensure that the components on both pages have a somewhat similar appearance. This enhances the overall visual impact of the animation.
117+
118+
The steps to add hero animation on a component are as follows:
119+
120+
1. On the first page, select a component, head over to the properties panel, enable **Use Hero Animation**, and **Add Hero Tag**.
121+
122+
<div style={{
123+
position: 'relative',
124+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
125+
height: 0,
126+
width: '100%'}}>
127+
<iframe
128+
src="https://www.loom.com/embed/089421c9e8cd4053b8eb1e3b920c6d0b?sid=e9869abc-e1f4-4053-ba64-09623c0ae765"
129+
title=""
130+
style={{
131+
position: 'absolute',
132+
top: 0,
133+
left: 0,
134+
width: '100%',
135+
height: '100%',
136+
colorScheme: 'light'
137+
}}
138+
frameborder="0"
139+
loading="lazy"
140+
webkitAllowFullScreen
141+
mozAllowFullScreen
142+
allowFullScreen
143+
allow="clipboard-write">
144+
</iframe>
145+
</div>
146+
<p></p>
147+
148+
2. On the second page, select a component, head over to the properties panel, enable **Use Hero Animation**, and select the **Hero Tag** that you created on the first page component.
149+
150+
<div style={{
151+
position: 'relative',
152+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
153+
height: 0,
154+
width: '100%'}}>
155+
<iframe
156+
src="https://www.loom.com/embed/b91c91d118bb4a12ab08cd272afb54a8?sid=2d2a09c7-9903-47d3-bb9d-21229f8ad27d"
157+
title=""
158+
style={{
159+
position: 'absolute',
160+
top: 0,
161+
left: 0,
162+
width: '100%',
163+
height: '100%',
164+
colorScheme: 'light'
165+
}}
166+
frameborder="0"
167+
loading="lazy"
168+
webkitAllowFullScreen
169+
mozAllowFullScreen
170+
allowFullScreen
171+
allow="clipboard-write">
172+
</iframe>
173+
</div>
174+
<p></p>
175+
176+
3. Add [navigation action](#) from page 1 to page 2.
177+
178+
## FAQs
179+
180+
<details>
181+
<summary>Why is the Hero animation not working when navigating forward? Works only backward</summary>
182+
<p>
183+
This is because the image on the second page does not exist on the very first frame. Hero animation will only work when the image is loaded from an asset or from the network (*if the path is pre-specified*). If you're pulling the image from a Firestore document, it might not be ready in time for the animation to take place.
184+
185+
To fix this issue, you can avoid loading an image directly from Firestore. Instead, you can pass the image URL (which would have already been retrieved from the Firestore) from the previous page to the second page. And then use that URL to load the image.
186+
187+
See how to [pass data](#) from one page to another.
188+
</p>
189+
</details>

0 commit comments

Comments
 (0)