From 53890f5f491bf8c58afca04f34c6a482b8a36a8b Mon Sep 17 00:00:00 2001
From: ChellyAhmed <ahmed.chelly@medtech.tn>
Date: Sat, 4 Mar 2023 01:50:34 +0100
Subject: [PATCH 1/6] Add _animations.scss in helpers

---
 scss/_helpers.scss            |  1 +
 scss/helpers/_animations.scss | 12 ++++++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 scss/helpers/_animations.scss

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index 13f2752c9bcc..4f909ffe2f3c 100644
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -10,3 +10,4 @@
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";
 @import "helpers/vr";
+@import "helpers/animations";
diff --git a/scss/helpers/_animations.scss b/scss/helpers/_animations.scss
new file mode 100644
index 000000000000..cdacad56c82b
--- /dev/null
+++ b/scss/helpers/_animations.scss
@@ -0,0 +1,12 @@
+.animation-direction-normal{
+  animation-direction: normal;
+}
+.animation-direction-reverse{
+  animation-direction: reverse;
+}
+.animation-direction-alternate{
+  animation-direction: alternate;
+}
+.animation-direction-alternate-reverse{
+  animation-direction: alternate-reverse;
+}

From 6e5ea94f29fa57e1efaf8712b0bb21749218c2cf Mon Sep 17 00:00:00 2001
From: ChellyAhmed <ahmed.chelly@medtech.tn>
Date: Sat, 4 Mar 2023 02:07:26 +0100
Subject: [PATCH 2/6] Add animations to docs

---
 site/content/docs/5.3/helpers/animations.md | 36 +++++++++++++++++++++
 site/data/sidebar.yml                       |  1 +
 2 files changed, 37 insertions(+)
 create mode 100644 site/content/docs/5.3/helpers/animations.md

diff --git a/site/content/docs/5.3/helpers/animations.md b/site/content/docs/5.3/helpers/animations.md
new file mode 100644
index 000000000000..e87610d093b4
--- /dev/null
+++ b/site/content/docs/5.3/helpers/animations.md
@@ -0,0 +1,36 @@
+---
+layout: docs
+title: Animations
+description: Customize the animation direction of all the different components.
+group: helpers
+aliases: "/docs/5.3/helpers/"
+---
+
+Easily customize `animation-direction`s by adding the appropriate class.
+
+The available classes:
+
+```scss
+.animation-direction-normal{
+  animation-direction: normal;
+}
+.animation-direction-reverse{
+  animation-direction: reverse;
+}
+.animation-direction-alternate{
+  animation-direction: alternate;
+}
+.animation-direction-alternate-reverse{
+  animation-direction: alternate-reverse;
+}
+```
+
+
+
+The following example shows how the class `animation-direction-reverse` was used to reverse the animation direction of a spinner-border.
+
+{{< example >}}
+<div class="spinner-border text-primary animation-direction-reverse" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+{{< /example >}}
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index dea26b401a9e..deeba85cbd72 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -101,6 +101,7 @@
   icon: magic
   icon_color: orange
   pages:
+    - title: Animations
     - title: Clearfix
     - title: Color & background
     - title: Colored links

From ec5d621111daf8fb70653e0388fed584da1f5326 Mon Sep 17 00:00:00 2001
From: ChellyAhmed <ahmed.chelly@medtech.tn>
Date: Tue, 11 Apr 2023 16:13:26 +0100
Subject: [PATCH 3/6] Add helpers to utilities and update Docs

---
 scss/_utilities.scss                        | 13 +++++
 scss/helpers/_animations.scss               | 12 -----
 site/content/docs/5.3/helpers/animations.md | 53 +++++++++++++--------
 3 files changed, 46 insertions(+), 32 deletions(-)
 delete mode 100644 scss/helpers/_animations.scss

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 37d248d7ca39..f76cfe6b3aa1 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -801,6 +801,19 @@ $utilities: map-merge(
       values: $zindex-levels,
     )
     // scss-docs-end utils-zindex
+    // animation-direction
+    // scss-docs-start animation utilities
+    "animation-direction": (
+      property: animation-direction,
+      class: animation-direction,
+      values: (
+        normal: normal,
+        reverse: reverse,
+        alternate: alternate,
+        alternate-reverse: alternate-reverse,
+      )
+    ),
+    // scss-docs-end animation utilities
   ),
   $utilities
 );
diff --git a/scss/helpers/_animations.scss b/scss/helpers/_animations.scss
deleted file mode 100644
index cdacad56c82b..000000000000
--- a/scss/helpers/_animations.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.animation-direction-normal{
-  animation-direction: normal;
-}
-.animation-direction-reverse{
-  animation-direction: reverse;
-}
-.animation-direction-alternate{
-  animation-direction: alternate;
-}
-.animation-direction-alternate-reverse{
-  animation-direction: alternate-reverse;
-}
diff --git a/site/content/docs/5.3/helpers/animations.md b/site/content/docs/5.3/helpers/animations.md
index e87610d093b4..ba68407233b7 100644
--- a/site/content/docs/5.3/helpers/animations.md
+++ b/site/content/docs/5.3/helpers/animations.md
@@ -1,36 +1,49 @@
 ---
 layout: docs
 title: Animations
-description: Customize the animation direction of all the different components.
+description: Use these helpers for quickly configuring the animation direction of an element.
 group: helpers
 aliases: "/docs/5.3/helpers/"
 ---
 
-Easily customize `animation-direction`s by adding the appropriate class.
-
-The available classes:
-
-```scss
-.animation-direction-normal{
-  animation-direction: normal;
-}
-.animation-direction-reverse{
-  animation-direction: reverse;
-}
-.animation-direction-alternate{
-  animation-direction: alternate;
-}
-.animation-direction-alternate-reverse{
-  animation-direction: alternate-reverse;
-}
+## animation-direction-normal
+
+Sets the animation direction to "normal", which plays the animation forwards (default).
+
+```html
+<div class="animation-direction-normal">...</div>
 ```
 
+## animation-direction-reverse
+
+Sets the animation direction to "reverse", which plays the animation backwards.
+
+```html
+<div class="animation-direction-reverse">...</div>
+```
+
+## animation-direction-alternate
+
+- `.animation-direction-alternate`: Sets the animation direction to "alternate", which plays the animation forwards and backwards alternately.
+
+```html
+<div class="animation-direction-alternate">...</div>
+```
+
+## animation-direction-alternate-reverse
+
+- `.animation-direction-alternate-reverse`: Sets the animation direction to "alternate-reverse", which plays the animation backwards and forwards alternately.
+
+```html
+<div class="animation-direction-alternate-reverse">...</div>
+```
 
+## Example:
 
-The following example shows how the class `animation-direction-reverse` was used to reverse the animation direction of a spinner-border.
+The following example shows how the class `animation-direction-alternate` was used to alternate the animation direction of a spinner-border.
 
 {{< example >}}
-<div class="spinner-border text-primary animation-direction-reverse" role="status">
+<div class="spinner-border text-primary animation-direction-alternate" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}

From 549f0aac4d1b692ad26f154d1951232294af5e79 Mon Sep 17 00:00:00 2001
From: ChellyAhmed <ahmed.chelly@medtech.tn>
Date: Tue, 11 Apr 2023 18:28:30 +0100
Subject: [PATCH 4/6] Add helpers to utilities and update Docs

---
 scss/_helpers.scss   | 1 -
 scss/_utilities.scss | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index 4f909ffe2f3c..13f2752c9bcc 100644
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -10,4 +10,3 @@
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";
 @import "helpers/vr";
-@import "helpers/animations";
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index f76cfe6b3aa1..1c6e29fa6e64 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -799,7 +799,7 @@ $utilities: map-merge(
       property: z-index,
       class: z,
       values: $zindex-levels,
-    )
+    ),
     // scss-docs-end utils-zindex
     // animation-direction
     // scss-docs-start animation utilities

From 8d19c6eac0be652d232126a4c3f1ff6a70b0dc62 Mon Sep 17 00:00:00 2001
From: ChellyAhmed <ahmed.chelly@medtech.tn>
Date: Tue, 11 Apr 2023 18:43:29 +0100
Subject: [PATCH 5/6] Update _utilities.scss

---
 scss/_utilities.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 1c6e29fa6e64..c0e87d5b6a36 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -801,7 +801,6 @@ $utilities: map-merge(
       values: $zindex-levels,
     ),
     // scss-docs-end utils-zindex
-    // animation-direction
     // scss-docs-start animation utilities
     "animation-direction": (
       property: animation-direction,

From ff083b443eb389542ce2a84923f30567737997c4 Mon Sep 17 00:00:00 2001
From: ChellyAhmed <ahmed.chelly@medtech.tn>
Date: Tue, 11 Apr 2023 18:45:50 +0100
Subject: [PATCH 6/6] Update _utilities.scss

---
 scss/_utilities.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index c0e87d5b6a36..0e681481db3f 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -801,7 +801,7 @@ $utilities: map-merge(
       values: $zindex-levels,
     ),
     // scss-docs-end utils-zindex
-    // scss-docs-start animation utilities
+    // scss-docs-start utils-animation-direction
     "animation-direction": (
       property: animation-direction,
       class: animation-direction,
@@ -811,8 +811,8 @@ $utilities: map-merge(
         alternate: alternate,
         alternate-reverse: alternate-reverse,
       )
-    ),
-    // scss-docs-end animation utilities
+    )
+    // scss-docs-end utils-animation-direction
   ),
   $utilities
 );