[FIX] website_animate: fix "rotate in down" animations

The animations "Rotate In-Down-Left" and "Rotate In-Down-Right" were
not done correctly because we were trying to get the position of the
element (by not taking CSS transforms into calculations) via the
matrix of the css transform and it does not work if there is a
transform-origin on the element.

task-2215118

closes odoo/design-themes#53

X-original-commit: ad7389630c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

website_animate/static/src/js/o_animate.frontend.js

@@ -54,10 +54,8 @@ var WebsiteAnimate = {
                 var state     = $el.css("animation-play-state");
 
                 // We need to offset for the change in position from some animation
-                // So we get the top value of the transform matrix
-                var transformMatrix = $el.css('transform').replace(/[^0-9\-.,]/g, '').split(',');
-                var transformOffset = transformMatrix[13] || transformMatrix[5];
-                var elTop = $el.offset().top - transformOffset;
+                // So we get the top value by not taking CSS transforms into calculations
+                var elTop = self.getElementOffsetTop($el[0]);
 
                 var visible = windowBottom > (elTop + elOffset) && windowTop < (elTop + elHeight - elOffset);
 
@@ -100,6 +98,17 @@ var WebsiteAnimate = {
             });
         });
     },
+
+    // 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
+        var top = 0;
+        do {
+            top += el.offsetTop || 0;
+            el = el.offsetParent;
+        } while (el);
+        return top;
+    },
 };
 
 publicWidget.registry.WebsiteAnimate = publicWidget.Widget.extend({