diff --git a/src/pages/utilities/animations.md b/src/pages/utilities/animations.md
index 43752359e4e..f06b80a7422 100755
--- a/src/pages/utilities/animations.md
+++ b/src/pages/utilities/animations.md
@@ -843,15 +843,16 @@ 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);
+  --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', 'blue', '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', 'blue', '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: 'blue',
-    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>
@@ -898,6 +908,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 +1031,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 +1073,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>