[animations] README updates

packages/animations/README.md

@@ -10,6 +10,89 @@ Currently, the following animated effects are available in this library:
 
 ### Material's [Open Container Transitions](https://material.io/design/motion/choreography.html#transformation)
 
-Tapping on a container  (e.g. a card or a button) will expand the container to reveal more information.
+Tapping on a container (e.g. a card or a button) will expand the container to reveal more information.
 
-*TODO(goderbauer): Add example videos of this effect.*
+1) Fade Transition
+
+- Card Example
+
+<p align="center">
+    <img src="example/demo_gifs/open_container_fade_card_demo.gif">
+</p>
+
+- Floating Action Button Example
+
+<p align="center">
+    <img src="example/demo_gifs/open_container_fade_floating_action_button_demo.gif">
+</p>
+
+2) Fade Through Transition
+
+- Card Example
+
+<p align="center">
+    <img src="example/demo_gifs/open_container_fade_through_card_demo.gif">
+</p>
+
+- Floating Action Button Example
+
+<p align="center">
+    <img src="example/demo_gifs/open_container_fade_through_floating_action_button_demo.gif">
+</p>
+
+### Material's [Shared Axis Transitions](https://material.io/design/motion/choreography.html#transformation)
+
+A transition animation between UI elements that have a spatial or navigational
+relationship. There are three types of shared axis transitions:
+
+1) Horizontal shared axis transition
+
+A new element slides and fades in horizontally while the previous element slides
+and fades out.
+
+<p align="center">
+    <img src="example/demo_gifs/shared_axis_horizontal_demo.gif">
+</p>
+
+2) Vertical shared axis transition
+
+A new element slides and fades in vertically while the previous element slides
+and fades out.
+
+<p align="center">
+    <img src="example/demo_gifs/shared_axis_vertical_demo.gif">
+</p>
+
+3) Scaled shared axis transition
+
+A new element scales and fades in while the previous element scales and fades out
+
+<p align="center">
+    <img src="example/demo_gifs/shared_axis_scaled_demo.gif">
+</p>
+
+### Material's [Fade Through Transition](https://material.io/design/motion/choreography.html#transformation)
+
+A transition animation between UI elements that have do not have a strong
+relationship to one another.
+
+<p align="center">
+    <img src="example/demo_gifs/fade_through_demo.gif">
+</p>
+
+### Material's [Fade Transition](https://material.io/design/motion/choreography.html#transformation)
+
+The fade pattern is used for UI elements that enter or exit from within
+the screen bounds.
+
+1) Modal Example:
+
+<p align="center">
+    <img src="example/demo_gifs/fade_modal_demo.gif">
+</p>
+
+2) Floating Action Button Example:
+
+<p align="center">
+    <img src="example/demo_gifs/fade_floating_action_button_demo.gif">
+</p>

packages/animations/lib/src/shared_axis_transition.dart

@@ -28,7 +28,6 @@ enum SharedAxisTransitionType {
 /// that have a spatial or navigational relationship. For example,
 /// transitioning from one page of a sign up page to the next one.
 ///
-///
 /// The following example shows how the SharedAxisPageTransitionsBuilder can
 /// be used in a [PageTransitionsTheme] to change the default transitions
 /// of [MaterialPageRoute]s.