[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>

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