From 22e83be4f304e0a80b765492fd74f053ac8ca096 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Tue, 27 Jul 2021 14:20:10 +0000
Subject: [PATCH] [IMP] website_animate: hide horizontal scrollbar during
 animation

Before this commit, when animated elements with a css translate
overflowed the #wrapwrap (before and during animations), a horizontal
scrollbar was visible on the #wrapwrap until the end of the animation.

After this commit, the horizontal scrollbar is no longer visible at
any time during the animations.

task-2215118

closes odoo/design-themes#270

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/o_animate.editor.js         |  7 ++++++
 .../static/src/js/o_animate.frontend.js       | 25 ++++++++++++++++++-
 .../static/src/scss/o_animate_frontend.scss   |  7 ++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/website_animate/static/src/js/o_animate.editor.js b/website_animate/static/src/js/o_animate.editor.js
index c51522ffa..1e16ed68a 100644
--- a/website_animate/static/src/js/o_animate.editor.js
+++ b/website_animate/static/src/js/o_animate.editor.js
@@ -5,12 +5,19 @@ var sOptions = require('web_editor.snippets.options');
 
 function forceAnimation() {
     var $els = $();
+    const $scrollingElement = $().getScrollingElement();
     _.each(arguments, function (el) {
         $els = $els.add(el);
     });
     $els.css('animation-name', 'dummy');
     void $els[0].offsetWidth;
+    $els.addClass('o_animating');
+    $scrollingElement[0].classList.add('o_wanim_overflow_x_hidden');
     $els.css('animation-name', '');
+    $els.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
+        $scrollingElement[0].classList.remove('o_wanim_overflow_x_hidden');
+        $els.removeClass('o_animating');
+    });
 }
 
 //  Animations
diff --git a/website_animate/static/src/js/o_animate.frontend.js b/website_animate/static/src/js/o_animate.frontend.js
index ef59ce471..8ffaffae0 100644
--- a/website_animate/static/src/js/o_animate.frontend.js
+++ b/website_animate/static/src/js/o_animate.frontend.js
@@ -13,6 +13,7 @@ var WebsiteAnimate = {
     // Retrieve animable elements and attach handlers.
     start: function () {
         var self   = this;
+        self.$scrollingElement = $().getScrollingElement();
         self.items = $(".o_animate");
         self.items.each(function () {
             var $el = $(this);
@@ -36,7 +37,7 @@ var WebsiteAnimate = {
         })
         .trigger("resize");
 
-        $().getScrollingElement()
+        self.$scrollingElement
         .on("scroll.o_animate, slid.bs.carousel", (_.throttle(function () {
             // _.throttle -> Limit the number of times the scroll function
             // can be called in a given period. (http://underscorejs.org/#throttle)
@@ -73,12 +74,15 @@ var WebsiteAnimate = {
 
     // Set elements to initial state
     reset_animation: function ($el) {
+        var self = this;
         var anim_name = $el.css("animation-name");
 
         $el
         .css({"animation-name" : "dummy-none", "animation-play-state" : ""})
         .removeClass("o_animated o_animating");
 
+        self._toggleOverflowXHidden(false);
+
         // force the browser to redraw using setTimeout
         setTimeout(function () {
             $el.css({"animation-name" : anim_name, "animation-play-state" : "paused"});
@@ -87,18 +91,30 @@ var WebsiteAnimate = {
 
     // Start animation and/or update element's state
     start_animation: function ($el) {
+        var self = this;
         // force the browser to redraw using setTimeout
         setTimeout(function () {
+            self._toggleOverflowXHidden(true);
             $el
             .css({"animation-play-state": "running"})
             .addClass("o_animating")
             .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
                 $el.addClass("o_animated").removeClass("o_animating");
+                self._toggleOverflowXHidden(false);
                 $(window).trigger("resize");
             });
         });
     },
 
+    // show/hide the horizontal scrollbar (on the #wrapwrap)
+    _toggleOverflowXHidden: function (add) {
+        if (add) {
+            this.$scrollingElement[0].classList.add('o_wanim_overflow_x_hidden');
+        } else if (!this.$scrollingElement.find('.o_animating').length) {
+            this.$scrollingElement[0].classList.remove('o_wanim_overflow_x_hidden');
+        }
+    },
+
     // Get element top offset by not taking CSS transforms into calculations
     getElementOffsetTop: function (el) {
         // Loop through the DOM tree and add its parent's offset to get page offset
@@ -128,6 +144,13 @@ publicWidget.registry.WebsiteAnimate = publicWidget.Widget.extend({
 
         return this._super.apply(this, arguments);
     },
+    /**
+     * @override
+     */
+    destroy: function () {
+        WebsiteAnimate.$scrollingElement[0].classList.remove('o_wanim_overflow_x_hidden');
+        this._super.apply(this, arguments);
+    },
 });
 
 // Backward compatibility for enark animation system
diff --git a/website_animate/static/src/scss/o_animate_frontend.scss b/website_animate/static/src/scss/o_animate_frontend.scss
index 8141f9f97..606a141e2 100644
--- a/website_animate/static/src/scss/o_animate_frontend.scss
+++ b/website_animate/static/src/scss/o_animate_frontend.scss
@@ -10,10 +10,17 @@
     backface-visibility: hidden; // avoid flickering
     text-rendering: geometricPrecision; // take care of animated titles
     visibility: hidden;
+
+    &:not(.o_animating) {
+        transform: none !important;
+    }
 }
 .o_animate_preview {
     visibility: visible;
 }
+.o_wanim_overflow_x_hidden {
+    overflow-x: hidden !important;
+}
 
 @-moz-keyframes o_animate_timeline_duration {
     0% { width: 0; }