From 39ec528b970eb5232b65be2f5576db7d97394142 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Jul 2023 13:09:37 -0700
Subject: [PATCH 1/2] docs(animation): add playground for basic animations

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
---
 docs/utilities/animations.md                  | 79 +------------------
 .../basic/angular/example_component_html.md   |  9 +++
 .../basic/angular/example_component_ts.md     | 40 ++++++++++
 static/usage/v7/animations/basic/demo.html    | 59 ++++++++++++++
 static/usage/v7/animations/basic/index.md     | 25 ++++++
 .../usage/v7/animations/basic/javascript.md   | 18 +++++
 static/usage/v7/animations/basic/react.md     | 51 ++++++++++++
 static/usage/v7/animations/basic/vue.md       | 51 ++++++++++++
 8 files changed, 255 insertions(+), 77 deletions(-)
 create mode 100644 static/usage/v7/animations/basic/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/basic/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/basic/demo.html
 create mode 100644 static/usage/v7/animations/basic/index.md
 create mode 100644 static/usage/v7/animations/basic/javascript.md
 create mode 100644 static/usage/v7/animations/basic/react.md
 create mode 100644 static/usage/v7/animations/basic/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 3ebcddb2835..7656b0b645b 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -138,84 +138,9 @@ const animation = createAnimation()
 
 ## Basic Animations
 
-### Usage
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```javascript
-createAnimation()
-  .addElement(document.querySelector('.square'))
-  .duration(1500)
-  .iterations(Infinity)
-  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-  .fromTo('opacity', '1', '0.2');
-```
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-this.animationCtrl.create()
-  .addElement(document.querySelector('.square'))
-  .duration(1500)
-  .iterations(Infinity)
-  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-  .fromTo('opacity', '1', '0.2');
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-<CreateAnimation
-  duration={1500}
-  iterations={Infinity}
-  fromTo={[
-    { property: 'transform', fromValue: 'translateX(0px)', toValue: 'translateX(100px)' },
-    { property: 'opacity', fromValue: '1', toValue: '0.2' }
-  ]}
->
-  ...
-</CreateAnimation>
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const elementRef = ref();
-
-...
-
-createAnimation()
-  .addElement(elementRef.value)
-  .duration(1500)
-  .iterations(Infinity)
-  .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
-  .fromTo('opacity', '1', '0.2');
-```
-</TabItem>
-</Tabs>
-````
-
-In the example above, an animation that changes the opacity on the `.square` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
-
-By default, all Ionic Animations are paused until the `play` method is called.
+import Basic from '@site/static/usage/v7/animations/basic/index.md';
 
-<Codepen user="ionic" slug="bGbMojP" />
+<Basic />
 
 ## Keyframe Animations
 
diff --git a/static/usage/v7/animations/basic/angular/example_component_html.md b/static/usage/v7/animations/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..3a27660393a
--- /dev/null
+++ b/static/usage/v7/animations/basic/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-card #card>
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" (click)="play()">Play</ion-button>
+<ion-button id="pause" (click)="pause()">Pause</ion-button>
+<ion-button id="stop" (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..e8a1dae1af8
--- /dev/null
+++ b/static/usage/v7/animations/basic/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(1500)
+      .iterations(Infinity)
+      .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+      .fromTo('opacity', '1', '0.2');
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/basic/demo.html b/static/usage/v7/animations/basic/demo.html
new file mode 100644
index 00000000000..e8f014943bc
--- /dev/null
+++ b/static/usage/v7/animations/basic/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const animation = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(1500)
+        .iterations(Infinity)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .fromTo('opacity', '1', '0.2');
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/basic/index.md b/static/usage/v7/animations/basic/index.md
new file mode 100644
index 00000000000..3d29e4e8e59
--- /dev/null
+++ b/static/usage/v7/animations/basic/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.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="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/animations/basic/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/basic/javascript.md b/static/usage/v7/animations/basic/javascript.md
new file mode 100644
index 00000000000..369131ac39b
--- /dev/null
+++ b/static/usage/v7/animations/basic/javascript.md
@@ -0,0 +1,18 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="animation.play()">Play</ion-button>
+<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
+<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(1500)
+    .iterations(Infinity)
+    .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+    .fromTo('opacity', '1', '0.2');
+</script>
+```
diff --git a/static/usage/v7/animations/basic/react.md b/static/usage/v7/animations/basic/react.md
new file mode 100644
index 00000000000..6767b71ead1
--- /dev/null
+++ b/static/usage/v7/animations/basic/react.md
@@ -0,0 +1,51 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1500)
+        .iterations(Infinity)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .fromTo('opacity', '1', '0.2');
+    }
+  }, [cardEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/basic/vue.md b/static/usage/v7/animations/basic/vue.md
new file mode 100644
index 00000000000..a0837b1b81e
--- /dev/null
+++ b/static/usage/v7/animations/basic/vue.md
@@ -0,0 +1,51 @@
+```html
+<template>
+  <ion-card ref="cardEl">
+    <ion-card-content>Card</ion-card-content>
+  </ion-card>
+
+  <ion-button id="play" @click="play()">Play</ion-button>
+  <ion-button id="pause" @click="pause()">Pause</ion-button>
+  <ion-button id="stop" @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardEl = ref(null);
+
+      let animation: Animation;
+
+      onMounted(() => {
+        animation = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(1500)
+          .iterations(Infinity)
+          .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+          .fromTo('opacity', '1', '0.2');
+      });
+
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+```

From 0e7e160b087a12db9c12163461d07add374ed5f8 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 11 Jul 2023 17:25:48 -0700
Subject: [PATCH 2/2] docs(animations): basic animation info

---
 docs/utilities/animations.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 7656b0b645b..50c033cecca 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -138,6 +138,10 @@ const animation = createAnimation()
 
 ## Basic Animations
 
+In the example below, an animation that changes the opacity on the `ion-card` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
+
+By default, all Ionic Animations are paused until the `play` method is called.
+
 import Basic from '@site/static/usage/v7/animations/basic/index.md';
 
 <Basic />