diff --git a/content/developer/howtos/website_themes/animations.rst b/content/developer/howtos/website_themes/animations.rst
index adbb617b75..82a1cba4c9 100644
--- a/content/developer/howtos/website_themes/animations.rst
+++ b/content/developer/howtos/website_themes/animations.rst
@@ -42,9 +42,11 @@ attribute to control the animation's direction intensity.
 
 .. code-block:: xml
 
-   <div class="col-lg-6 o_animate o_anim_fade_in o_animate_both_scroll o_anim_from_bottom" style="--wanim-intensity: 100; animation-duration: 2s; animation-delay: 1s;">
-       <h2>A Section Subtitle</h2>
-       <p>Write one or two paragraphs describing your product or services.</p>
+   <div
+      class="col-lg-6 o_animate o_anim_from_right o_anim_slide_in"
+      style="--wanim-intensity: 50; animation-duration: 1s; animation-delay: 0;">
+      <h2>A Section Subtitle</h2>
+      <p>Write one or two paragraphs describing your product or services.</p>
    </div>
 
 .. image:: animations/appearance.png
@@ -74,10 +76,14 @@ Additionally, we can also set an `in` or `out` effect, an animation `direction`
 
 .. code-block:: xml
 
-    <div class="col-lg-6 o_animate o_animate_on_scroll o_animate_out o_anim_fade_in o_anim_from_right" data-scroll-zone-start="50" data-scroll-zone-end="100" style="--wanim-intensity: 100;">
-        <h2>A Section Subtitle</h2>
-        <p>Write one or two paragraphs describing your product or services.</p>
-    </div>
+   <div
+      class="col-lg-6 o_animate o_animate_on_scroll o_animate_out o_anim_fade_in o_anim_from_right"
+      data-scroll-zone-start="50"
+      data-scroll-zone-end="100"
+      style="--wanim-intensity: 100;">
+      <h2>A Section Subtitle</h2>
+      <p>Write one or two paragraphs describing your product or services.</p>
+   </div>
 
 .. list-table::
    :header-rows: 1
@@ -102,7 +108,7 @@ Additionally, we can also set an `in` or `out` effect, an animation `direction`
 
 .. seealso::
    `Website Animate
-   <https://github.com/odoo/odoo/blob/c272c49657e8b7865bb93e5f1dcc183cc7d44f17/addons/website/static/src/scss/website.scss#L2075>`_
+   <https://github.com/odoo/odoo/blob/e901555e99e59590aa25595bf791d4856e085999/addons/website/static/src/scss/website.scss#L2388>`_
 
 .. _website_themes/animations/hover:
 
@@ -129,11 +135,11 @@ also define the type of animation in the `data-hover-effect` attribute.
 .. code-block:: xml
 
     <img
-        src="..." alt="..."
-        class="img img-fluid o_we_custom_image o_animate_on_hover"
-        data-hover-effect="overlay"
-        data-hover-effect-color="rgba(0, 0, 0, 0.25)"
-    />
+      src="..."
+      alt="..."
+      class="img img-fluid o_we_custom_image o_animate_on_hover"
+      data-hover-effect="overlay"
+      data-hover-effect-color="rgba(0, 0, 0, 0.25)" />
 
 .. list-table::
    :header-rows: 1
@@ -157,7 +163,6 @@ also define the type of animation in the `data-hover-effect` attribute.
      - Integer (saved as `px`)
 
 .. image:: animations/hover.png
-   :width: 300
    :alt: Animation on hover options
 
 .. seealso::
diff --git a/content/developer/howtos/website_themes/animations/appearance.png b/content/developer/howtos/website_themes/animations/appearance.png
index 7ed1d9764f..55057e2da8 100644
Binary files a/content/developer/howtos/website_themes/animations/appearance.png and b/content/developer/howtos/website_themes/animations/appearance.png differ
diff --git a/content/developer/howtos/website_themes/animations/hover.png b/content/developer/howtos/website_themes/animations/hover.png
index 4fb567e215..5e23b66d39 100644
Binary files a/content/developer/howtos/website_themes/animations/hover.png and b/content/developer/howtos/website_themes/animations/hover.png differ
diff --git a/content/developer/howtos/website_themes/animations/scroll.png b/content/developer/howtos/website_themes/animations/scroll.png
index fef88f97ae..47215ab95e 100644
Binary files a/content/developer/howtos/website_themes/animations/scroll.png and b/content/developer/howtos/website_themes/animations/scroll.png differ