docs(fab): document animated property and reduced motion with playgro…

docs/api/fab.mdx

@@ -89,6 +89,18 @@ import ButtonSizing from '@site/static/usage/v9/fab/button-sizing/index.mdx';
 
 <ButtonSizing />
 
+## Animation {/* #animation */}
+
+By default, the main fab button rotates and scales between its content and the close icon when a fab list opens. Setting the `animated` property of a fab button to `false` turns off its transitions. Each fab button has its own transitions, so set `animated` on the buttons in the fab list too. Setting the `animated` [global config](/developing/config.mdx#global-config) to `false` turns off the transitions for every fab button in the app. In `md` mode, the ripple effect still plays when a fab button's `animated` property is `false`, but the global config turns it off too.
+
+When the user has turned on reduced motion in their operating system, the content and close icon fade instead of rotating and scaling. The button's other state transitions, such as background and shadow changes, are turned off, and the button doesn't grow while pressed in `ios` mode.
+
+In the following example, the fab on the left uses the default transitions, and the fab on the right sets `animated` to `false` on every fab button.
+
+import Animation from '@site/static/usage/v9/fab/animation/index.mdx';
+
+<Animation />
+
 ## Theming {/* #theming */}
 
 ### Colors {/* #colors */}

static/code/stackblitz/v9/angular/package.json

@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^22.0.0",
     "@angular/platform-browser-dynamic": "^22.0.0",
     "@angular/router": "^22.0.0",
-    "@ionic/angular": "9.0.8",
-    "@ionic/core": "9.0.8",
+    "@ionic/angular": "9.0.11-dev.11794501674.16819717",
+    "@ionic/core": "9.0.11-dev.11794501674.16819717",
     "ionicons": "8.1.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0"

static/code/stackblitz/v9/html/package.json

@@ -9,7 +9,7 @@
     "start": "vite preview"
   },
   "dependencies": {
-    "@ionic/core": "9.0.8",
+    "@ionic/core": "9.0.11-dev.11794501674.16819717",
     "ionicons": "8.1.0"
   },
   "devDependencies": {

static/code/stackblitz/v9/react/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "9.0.8",
-    "@ionic/react-router": "9.0.8",
+    "@ionic/react": "9.0.11-dev.11794501674.16819717",
+    "@ionic/react-router": "9.0.11-dev.11794501674.16819717",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

static/code/stackblitz/v9/vue/package.json

@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "9.0.8",
-    "@ionic/vue-router": "9.0.8",
+    "@ionic/vue": "9.0.11-dev.11794501674.16819717",
+    "@ionic/vue-router": "9.0.11-dev.11794501674.16819717",
     "vue": "^3.2.25",
     "vue-router": "5.4.0"
   },

static/usage/v9/fab/animation/angular/example_component_html.md

@@ -0,0 +1,37 @@
+```html
+<ion-content>
+  <ion-fab slot="fixed" vertical="top" horizontal="start">
+    <ion-fab-button>
+      <ion-icon name="add"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="bottom">
+      <ion-fab-button>
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab slot="fixed" vertical="top" horizontal="end">
+    <ion-fab-button [animated]="false">
+      <ion-icon name="add"></ion-icon>
+    </ion-fab-button>
+    <ion-fab-list side="bottom">
+      <ion-fab-button [animated]="false">
+        <ion-icon name="document"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button [animated]="false">
+        <ion-icon name="color-palette"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button [animated]="false">
+        <ion-icon name="globe"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+</ion-content>
+```

static/usage/v9/fab/animation/angular/example_component_ts.md

@@ -0,0 +1,24 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular';
+
+import { addIcons } from 'ionicons';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFab, IonFabButton, IonFabList, IonIcon],
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ add, colorPalette, document, globe });
+  }
+}
+```

static/usage/v9/fab/animation/demo.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fab</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css"
+    />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <ion-fab slot="fixed" vertical="top" horizontal="start">
+          <ion-fab-button>
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="bottom">
+            <ion-fab-button>
+              <ion-icon name="document"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="color-palette"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button>
+              <ion-icon name="globe"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+
+        <ion-fab slot="fixed" vertical="top" horizontal="end">
+          <ion-fab-button animated="false">
+            <ion-icon name="add"></ion-icon>
+          </ion-fab-button>
+          <ion-fab-list side="bottom">
+            <ion-fab-button animated="false">
+              <ion-icon name="document"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button animated="false">
+              <ion-icon name="color-palette"></ion-icon>
+            </ion-fab-button>
+            <ion-fab-button animated="false">
+              <ion-icon name="globe"></ion-icon>
+            </ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v9/fab/animation/index.mdx

@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="9"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v9/fab/animation/demo.html"
+  includeIonContent={false}
+/>