Updated widget animations

Author: pinkeshmars

docs/ff-concepts/animations/animation_gifs/set-animations-from-variable.gif

@@ -3,17 +3,16 @@ title: Animations
 sidebar_position: 1
 ---
 
-Adding animations to your app enhances the user experience. A well-choreographed animation can make the app look and feel more intuitive.
+Enhancing your app with animations significantly improves the user experience, making it more engaging and intuitive. In FlutterFlow, you have several options to add animations to your app:
 
-In FlutterFlow, you have the following options to add animations to your app:
+- **Widget Animations**: Add animation effects to an entire widget.
+- **Implicit Animations**: Animate changes in specific widget properties, such as the height of a Container.
+- **Hero Animations**: Animate a widget that transitions smoothly between screens, also known as shared element transitions.
+- **Page Transitions**: Specify transitions between pages within your app.
+- **Import Animations**: Import animations you've created using other tools such [lottiefiles](https://lottiefiles.com/) and [Rive](https://rive.app/).
 
-1. **Widget Animations**: add animation effects to an entire widget
-1. **Implicit Animations**: animate changes in specific widget properties (i.e. change in height of a Container)
-1. **Hero Animations**: animate a widget that flies between screens (also known as shared element transitions)
-1. **Import Lottie or Rive animations**: import animations you've created in other tools
-1. **Page transitions**: specify transitions between pages within your
 
-To learn more about animations in FlutterFlow checkout this video:
+To learn more about animations in FlutterFlow, check out this video:
 <div class="video-container"><iframe src="https://www.youtube.com/embed/-quxi_t0eWU?si=GdZBMFcuEZEyFplB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
 <!-- TO DO create animations showcase-->

docs/ff-concepts/animations/animations.md

@@ -1,6 +1,6 @@
 ---
 title: Hero Animations
-sidebar_position: 1
+sidebar_position: 3
 ---
 
 ## Hero Animation Overview

docs/ff-concepts/animations/hero_animations.md

@@ -1,6 +1,6 @@
 ---
 title: Implicit Animations
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 Animating a container (show a progress bar for checkout page loading)

docs/ff-concepts/animations/implicit_animations.md

@@ -1,6 +1,6 @@
 ---
-title: Navigation Transitions
-sidebar_position: 1
+title: Page Transitions
+sidebar_position: 4
 ---
 
 The animation that plays while going from one page of the app to another is known as the navigation transition. While defining a Navigate To Action on any widget, you will notice the transition type is set as Default but you can change that animation easily.

docs/ff-concepts/animations/page_transitions.md

@@ -74,7 +74,7 @@ const sidebars: SidebarsConfig = {
             items: [
                 {
                     type: 'autogenerated',
-                    dirName: 'integrations'
+                    dirName: 'Integrations'
                 }
             ],
         }