From 627954d5e9e58565fc46c38799128f8d1d0af39e Mon Sep 17 00:00:00 2001
From: dillionmegida <dillionmegida@gmail.com>
Date: Mon, 12 Oct 2020 21:39:23 +0100
Subject: [PATCH 1/2] docs(animations): add React and Angular example for
 preference animations

Also, modified the stylesheet to appropriately fit the context
---
 src/pages/utilities/animations.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/utilities/animations.md b/src/pages/utilities/animations.md
index 43752359e4e..2f1c70cb0e9 100755
--- a/src/pages/utilities/animations.md
+++ b/src/pages/utilities/animations.md
@@ -843,10 +843,10 @@ Developers can also tailor their animations to user preferences such as `prefers
   width: 100px;
   height: 100px;
   opacity: 0.5;
-  background: blue;
   margin: 10px;
   
   --background: red;
+  background: var(--background);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -865,7 +865,7 @@ createAnimation()
    .duration(1500)
    .iterations(Infinity)
    .direction('alternate')
-   .fromTo('background', 'blue', 'var(--background)');
+   .fromTo('background', 'red', 'var(--background)');
 ```
 </docs-tab>
 <docs-tab tab="angular">
@@ -876,7 +876,7 @@ this.animationCtrl.create()
    .duration(1500)
    .iterations(Infinity)
    .direction('alternate')
-   .fromTo('background', 'blue', 'var(--background)');
+   .fromTo('background', 'red', 'var(--background)');
 ```
 </docs-tab>
 <docs-tab tab="react">
@@ -888,7 +888,7 @@ this.animationCtrl.create()
   direction='alternate'
   fromTo={{
     property: 'background',
-    fromValue: 'blue',
+    fromValue: 'red',
     toValue: 'var(--background)'
   }}
 >
@@ -898,6 +898,8 @@ this.animationCtrl.create()
 </docs-tab>
 </docs-tabs>
 
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-angular-preference-based-animations) and in React [here](https://stackblitz.com/edit/ionic-react-preference-based-animations).
+
 This method works in all supported browsers when creating animations for the first time. Most browsers are also capable of dynamically updating keyframe animations as the CSS Variables change.
 
 Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
@@ -1019,7 +1021,7 @@ export class ModalExample {
 
 ```javascript
 import React, { useState } from 'react';
-import { CreateAnimation, IonModal, IonButton, IonContent } from '@ionic/react';
+import { createAnimation, IonModal, IonButton, IonContent } from '@ionic/react';
 
 export const ModalExample: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
@@ -1061,6 +1063,8 @@ export const ModalExample: React.FC = () => {
 </docs-tab>
 </docs-tabs>
 
+You can view a live example of this in Angular [here](https://stackblitz.com/edit/ionic-angular-animation-override) and in React [here](https://stackblitz.com/edit/ionic-react-animation-overwride).
+
 <docs-codepen user="ionic" slug="ExapZBZ"></docs-codepen>
 
 

From e2bb80c97d10cdd91834524adb39735734900625 Mon Sep 17 00:00:00 2001
From: dillionmegida <dillionmegida@gmail.com>
Date: Tue, 13 Oct 2020 14:45:37 +0100
Subject: [PATCH 2/2] docs: change animation style for a11y reasons

---
 src/pages/utilities/animations.md | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/pages/utilities/animations.md b/src/pages/utilities/animations.md
index 2f1c70cb0e9..f06b80a7422 100755
--- a/src/pages/utilities/animations.md
+++ b/src/pages/utilities/animations.md
@@ -844,14 +844,15 @@ Developers can also tailor their animations to user preferences such as `prefers
   height: 100px;
   opacity: 0.5;
   margin: 10px;
-  
   --background: red;
   background: var(--background);
+  --translate-position: translateX(50px)
 }
 
 @media (prefers-color-scheme: dark) {
   .square {
     --background: green;
+    --translate-position: translateX(250px)
   }
 }
 ```
@@ -865,7 +866,8 @@ createAnimation()
    .duration(1500)
    .iterations(Infinity)
    .direction('alternate')
-   .fromTo('background', 'red', 'var(--background)');
+   .fromTo("background", "red", "var(--background)")
+   .fromTo("transform", "translateX(0)", "var(--translate-position)");
 ```
 </docs-tab>
 <docs-tab tab="angular">
@@ -876,7 +878,8 @@ this.animationCtrl.create()
    .duration(1500)
    .iterations(Infinity)
    .direction('alternate')
-   .fromTo('background', 'red', 'var(--background)');
+   .fromTo("background", "red", "var(--background)")
+   .fromTo("transform", "translateX(0)", "var(--translate-position)");
 ```
 </docs-tab>
 <docs-tab tab="react">
@@ -886,11 +889,18 @@ this.animationCtrl.create()
   duration={1500}
   iterations={Infinity}
   direction='alternate'
-  fromTo={{
-    property: 'background',
-    fromValue: 'red',
-    toValue: 'var(--background)'
-  }}
+  fromTo={[
+    {
+      property: "background",
+      fromValue: "red",
+      toValue: "var(--background)"
+    },
+    {
+      property: "transform",
+      fromValue: "translateX(0)",
+      toValue: "var(--translate-position)"
+    }
+  ]}
 >
   <div className="square"></div>
 </CreateAnimation>