From ac8bdd7329fda4c7e4f5ba5262412c0852fe1093 Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Wed, 1 Jul 2020 12:32:33 +0000 Subject: [PATCH] [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: ad7389630c152dae6e01acc14e2a891c867858a5 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/o_animate.frontend.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/website_animate/static/src/js/o_animate.frontend.js b/website_animate/static/src/js/o_animate.frontend.js index 48c80cada..859376b7d 100644 --- a/website_animate/static/src/js/o_animate.frontend.js +++ b/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({