Addressed review comments

Author: pinkeshmars

docs/ff-concepts/animations/animation_gifs/animation-properties.png

@@ -27,7 +27,10 @@ import fadeEaseOut from '@site//static/img/animations/animation_gifs/fade-easeou
 Widget animations allow you to add animation effects at the widget level.
 To add an animation to a widget, you'll need to go to the property panel for the widget and select the animations tab.
 
-<img src={animationsOverview}  alt="Animation tab within the property panel is used to add widget animations. Animation trigger specifies when the animation will be run. Widget animations can be triggered when the page (or widget in the case of a delayed load) loaded, or within an action. Animation effect specifies the type of animation to use.Animation curve specifies the function used to interpolate values over time. It controls the speed and style of the animation. Animation properties specifies the properties that can be configured for all widget animations, like whether or not it should loop. Effect-specific properties are properties to specific to the animation effect selected. For example, Fade animations allow you to control the initial opacity and the final opacity. You can customize these values to get the look and feel you desire." />
+<figure>
+    ![animation-properties.png](animation_gifs/animations_overview-2.png)
+  <figcaption class="centered-caption">Animation Overview</figcaption>
+</figure>
 
 <!-- When you create a widget animation, you'll sepcify:
 
@@ -53,9 +56,10 @@ In addition, there are animation-specific properties that usually have both a st
 | **Saturate** | Used to enhance visual appeal by making colors more vibrant for focused content or creating a muted effect for background elements. |<img src={saturateGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Strength`: 0 indicates fully desaturated, 100 represents normal saturation and >100 represents the percent saturation |
 | **Tilt** | Creates a transforming effect (3D perspective) on your widget. Typically used to add a subtle interactive element to UI components, like buttons or cards, indicating user interaction or focus. | <img src={tiltGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Tilt`: The angle at which the widget is viewed. |
 | **Flip** | Flip animation rotates an element around its horizontal or vertical axis, creating a mirror effect. It's often used for flipping cards in a UI to reveal hidden information. | <img src={flipGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Flip`: The angle at which the widget is viewed. |
-| **Shimmer** | Creates a "shiny" effect moving across the screen, often used to signify that data or content is in the process of loading or being fetched. | <img src={shimmerGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Color`: The color of the "shiny" line or gradient that sweeps of the widget. A common practice is to use a slightly lighter shade than the content. <br></br> <br></br> `Angle`: Determines the direction of the shimmer effect across the content. 0 degrees for horizontal and 90 for vertical. |
+| **Shimmer** | Creates a "shiny" effect moving across the screen, often used to signify that data or content is in the process of loading or being fetched. <br></br> <br></br> **Note** that this animation doesn't run on the Test mode.  | <img src={shimmerGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Color`: The color of the "shiny" line or gradient that sweeps of the widget. A common practice is to use a slightly lighter shade than the content. <br></br> <br></br> `Angle`: Determines the direction of the shimmer effect across the content. 0 degrees for horizontal and 90 for vertical. |
 | **Tint** | Adds a color overlay effect to your content. |<img src={tintGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Color`: Color of the overlay. <br></br> <br></br> `Strength`: Intensity of the tint. |
 
+
 ## Animation curves
 When applying an animation, you'll also be able to specify the curve. An animation curve is essentially a mathematical formula used to interpolate values over time. Changing the animation curve allows you to control the speed and style of the animation.
 
@@ -75,7 +79,7 @@ FlutterFlow supports a variety of animation curves:
 | **Linear** | Progresses at a constant speed throughout the animation. It provides a uniform transition from start to end, with no acceleration or deceleration.|
 
 
-## How to trigger an animation on page load
+## Animation on Page Load
 There are many cases when you might want to trigger an animation when a page or (in the case of a delayed load) widget is loaded onto the screen. 
 
 Consider an eCommerce use case, where a backend query is used to retrieve a list of trending products. There may be some delay between when the page is first loaded and when the actual results are displayed. To improve the user experience we can add some animations to let users know when content is loading.
@@ -111,7 +115,7 @@ To create an experience like this, you need to add a shimmer animation to a widg
 
 <!-- add aracde -->
 
-## Triggering an animation as part of an action flow
+## Animation on Action Trigger
 Beyond triggering widget animations on load, you can trigger an animation to occur as part of an action. For example, say you want a like button to be animated when a user clicks it.
 
 Here's how you do it: