diff --git a/src/js/WWebWidget.js b/src/js/WWebWidget.js
index 7adf189ee..66e55e0c7 100644
--- a/src/js/WWebWidget.js
+++ b/src/js/WWebWidget.js
@@ -6,313 +6,365 @@
 
 /* Note: this is at the same time valid JavaScript and C++. */
 
-WT_DECLARE_WT_MEMBER(1, JavaScriptFunction, "animateDisplay", function(APP, id, effects, timing, duration, display) {
-  const WT = APP.WT;
-
-  const doAnimateDisplay = function(id, effects, timing, duration, display) {
-    const NoEffect = 0x0;
-    const SlideInFromLeft = 0x1;
-    const SlideInFromRight = 0x2;
-    const SlideInFromBottom = 0x3;
-    const SlideInFromTop = 0x4;
-    const Pop = 0x5;
-    const Fade = 0x100;
-
-    // const Ease = 0;
-    // const Linear = 1;
-    // const EaseIn = 2;
-    // const EaseOut = 3;
-    // const EaseInOut = 4;
-    // const CubicBezier = 5;
-
-    const timings = ["ease", "linear", "ease-in", "ease-out", "ease-in-out"],
-      inverseTiming = [0, 1, 3, 2, 4, 5];
-
-    const animationPrefix = WT.vendorPrefix(WT.styleAttribute("animation"));
-    const transitionPrefix = WT.vendorPrefix(WT.styleAttribute("transition"));
-    const transformPrefix = WT.vendorPrefix(WT.styleAttribute("transform"));
-    const el = WT.$(id),
-      animationEventEnd = animationPrefix === "Webkit" ?
-        "webkitAnimationEnd" :
-        "animationend",
-      transitionEventEnd = transitionPrefix === "Webkit" ?
-        "webkitTransitionEnd" :
-        "transitionend";
-
-    if (WT.css(el, "display") !== display) {
-      const p = el.parentNode;
-
-      if (p.wtAnimateChild) {
-        p.wtAnimateChild(WT, el, effects, timing, duration, { display: display });
-        return;
-      }
-
-      if (el.classList.contains("animating")) {
-        el.addEventListener(transitionEventEnd, function() {
-          doAnimateDisplay(id, effects, timing, duration, display);
-        }, { once: true });
-        return;
-      }
-
-      el.classList.add("animating");
-
-      const effect = effects & 0xFF,
-        hide = display === "none",
-        cssTiming = timings[hide ? inverseTiming[timing] : timing],
-        elStyle = {};
-
+WT_DECLARE_WT_MEMBER(
+  1,
+  JavaScriptFunction,
+  "animateDisplay", /**
+   * @param {Object} APP
+   * @param {Object} APP.WT
+   * @param {Object} APP.layouts2
+   * @param {string} id
+   * @param {number} effects
+   * @param {number} timing
+   * @param {number} duration
+   * @param {string} display
+   */
+  function(APP, id, effects, timing, duration, display) {
+    const WT = APP.WT;
+
+    /**
+     * @param {string} id
+     * @param {number} effects
+     * @param {number} timing
+     * @param {number} duration
+     * @param {string} display
+     */
+    function doAnimateDisplay(id, effects, timing, duration, display) {
+      const Effect = {
+        None: 0x0,
+        SlideInFromLeft: 0x1,
+        SlideInFromRight: 0x2,
+        SlideInFromBottom: 0x3,
+        SlideInFromTop: 0x4,
+        Pop: 0x5,
+        Fade: 0x100,
+      };
+
+      const Timing = {
+        Ease: 0,
+        Linear: 1,
+        EaseIn: 2,
+        EaseOut: 3,
+        EaseInOut: 4,
+        CubicBezier: 5,
+      };
+
+      const timings = [
+        "ease",
+        "linear",
+        "ease-in",
+        "ease-out",
+        "ease-in-out",
+      ];
+
+      const inverseTiming = [
+        Timing.Ease,
+        Timing.Linear,
+        Timing.EaseOut,
+        Timing.EaseIn,
+        Timing.EaseInOut,
+        Timing.CubicBezier,
+      ];
+
+      const el = document.getElementById(id);
+      const elc = el.childElementCount === 1 ? el.firstElementChild : null;
+
+      /**
+       * @param {HTMLElement} el
+       * @param {Object} style
+       * @param {Object} [savedStyle]
+       */
       function set(el, style, savedStyle) {
         for (const i of Object.keys(style)) {
-          let k = i;
-
-          if (k === "animationDuration" && animationPrefix !== "") {
-            k = animationPrefix + k.substring(0, 1).toUpperCase() +
-              k.substring(1);
-          } else if (k === "transform" && transformPrefix !== "") {
-            k = transformPrefix + k.substring(0, 1).toUpperCase() +
-              k.substring(1);
-          } else if (k === "transition" && transitionPrefix !== "") {
-            k = transitionPrefix + k.substring(0, 1).toUpperCase() +
-              k.substring(1);
-          }
-
-          if (savedStyle && typeof (savedStyle[k]) === "undefined") {
-            savedStyle[k] = el.style[k];
+          if (savedStyle && typeof savedStyle[i] === "undefined") {
+            savedStyle[i] = el.style[i];
           }
-          el.style[k] = style[i];
+          el.style[i] = style[i];
         }
       }
 
       const restore = set;
 
-      function onEnd() {
-        if (el.wtAnimatedHidden) {
-          el.wtAnimatedHidden(hide);
+      const displayChanged = (() => {
+        // Experimentally set display to the given display option, so
+        // we can check if the display value actually changed.
+        const elStyle = {};
+        const prevDisplay = WT.css(el, "display");
+        set(el, { display }, elStyle);
+        const newDisplay = WT.css(el, "display");
+        restore(el, elStyle);
+        return prevDisplay !== newDisplay;
+      })();
+
+      if (displayChanged) {
+        const p = el.parentNode;
+
+        if (p.wtAnimateChild) {
+          p.wtAnimateChild(WT, el, effects, timing, duration, { display });
+          return;
         }
 
-        el.classList.remove("animating");
-
-        if (APP.layouts2) {
-          APP.layouts2.setElementDirty(el);
+        if (el.classList.contains("animating")) {
+          // already animating, wait until animation is done
+          Promise.all(
+            el.getAnimations()
+              .map((animation) => animation.finished)
+          ).then(() => {
+            doAnimateDisplay(id, effects, timing, duration, display);
+          });
+          return;
         }
-      }
 
-      function show() {
-        el.style.display = display;
-        if (el.wtPosition) {
-          el.wtPosition();
-        }
-        if (window.onshow) {
-          window.onshow();
-        }
-      }
+        el.classList.add("animating");
 
-      function animateStaticVertical() {
-        let targetHeight, currentHeight;
-        const elcStyle = {};
-        let elc;
+        const effect = effects & 0xFF,
+          hide = display === "none",
+          easing = timings[hide ? inverseTiming[timing] : timing],
+          elStyle = {},
+          elcStyle = {};
 
-        if (hide) {
-          currentHeight = WT.css(el, "height");
-          set(el, { height: currentHeight, overflow: "hidden" }, elStyle);
+        const animationOptions = {
+          duration,
+          iterations: 1,
+          easing,
+        };
 
-          if (effect === SlideInFromTop && el.childNodes.length === 1) {
-            elc = el.firstChild;
-            set(elc, { transform: "translateY(0)" }, elcStyle);
-            if (!WT.hasTag(elc, "TABLE")) {
-              set(elc, { display: "block" }, elcStyle);
-            }
+        function onEnd() {
+          if (el.wtAnimatedHidden) {
+            el.wtAnimatedHidden(hide);
           }
 
-          targetHeight = "0px";
-        } else {
-          const pStyle = {};
-
-          set(p, { height: WT.css(p, "height"), overflow: "hidden" }, pStyle);
-
-          show();
-
-          if (WT.css(el, "height") === "0px") {
-            el.style.height = "auto";
+          if (el.getAnimations().length === 0) {
+            el.classList.remove("animating");
           }
 
-          targetHeight = WT.css(el, "height");
-          set(el, { height: "0px", overflow: "hidden" }, elStyle);
-          restore(p, pStyle);
-
-          if (effect === SlideInFromTop) {
-            set(el, { WebkitBackfaceVisibility: "visible" }, elStyle);
-            el.scrollTop = 1000;
+          if (APP.layouts2) {
+            APP.layouts2.setElementDirty(el);
           }
         }
 
-        if (effects & Fade) {
-          set(el, { opacity: (hide ? 1 : 0) }, elStyle);
+        function show() {
+          el.style.display = display;
+          if (el.wtPosition) {
+            el.wtPosition();
+          }
+          if (window.onshow) {
+            window.onshow();
+          }
         }
 
-        currentHeight = el.clientHeight; // force 'absorbing' set height
+        function animateStaticVertical() {
+          if (!hide) {
+            show();
+          }
+
+          set(el, { overflow: "hidden" }, elStyle);
 
-        setTimeout(function() {
-          set(el, { transition: "all " + duration + "ms " + cssTiming, height: targetHeight }, elStyle);
+          const animations = [];
+
+          const elcPos = (() => {
+            if (!elc) {
+              return null;
+            }
+            const elRect = el.getBoundingClientRect();
+            const elcRect = elc.getBoundingClientRect();
+            return {
+              left: elcRect.x - elRect.x - WT.px(el, "border-left-width"),
+              top: elcRect.y - elRect.y - WT.px(el, "border-top-width"),
+            };
+          })();
+
+          if (elc && effect === Effect.SlideInFromTop) {
+            // Content slides along
+            const visibleKeyframe = {
+              transform: "translateY(0px)",
+            };
+            const hiddenKeyframe = {
+              transform: `translateY(-${el.clientHeight}px)`,
+            };
+            const keyframes = hide ? [visibleKeyframe, hiddenKeyframe] : [hiddenKeyframe, visibleKeyframe];
+            animations.push(elc.animate(keyframes, animationOptions));
+          }
+
+          {
+            const hiddenKeyframe = {
+              height: "0px",
+              paddingTop: "0px",
+              paddingBottom: "0px",
+              borderTopWidth: "0px",
+              borderBottomWidth: "0px",
+            };
+            const visibleKeyframe = {
+              height: WT.css(el, "height"),
+              paddingTop: WT.css(el, "padding-top"),
+              paddingBottom: WT.css(el, "padding-bottom"),
+              borderTopWidth: WT.css(el, "border-top-width"),
+              borderBottomWidth: WT.css(el, "border-bottom-width"),
+            };
+
+            if (effects & Effect.Fade) {
+              hiddenKeyframe.opacity = 0;
+              visibleKeyframe.opacity = 1;
+            }
 
-          if (effects & Fade) {
-            set(el, { opacity: (hide ? 0 : 1) });
+            const keyframes = hide ? [visibleKeyframe, hiddenKeyframe] : [hiddenKeyframe, visibleKeyframe];
+            animations.push(el.animate(keyframes, animationOptions));
           }
 
           if (elc) {
-            set(elc, {
-              transition: "all " + duration + "ms " + cssTiming,
-              transform: "translateY(-" + currentHeight + ")",
-            }, elcStyle);
+            // Fix content position
+            set(el, { position: "relative" }, elStyle);
+            const style = {
+              position: "absolute",
+              left: `${elcPos.left}px`,
+              top: `${elcPos.top}px`,
+            };
+            set(elc, style, elcStyle);
           }
 
-          el.addEventListener(transitionEventEnd, function() {
+          Promise.all(animations.map((animation) => animation.finished)).then(() => {
             if (hide) {
               el.style.display = display;
             }
 
             restore(el, elStyle);
-            if (effect === SlideInFromTop) {
-              el.scrollTop = 0;
-              if (elc) {
-                restore(elc, elcStyle);
-              }
-            }
+            restore(elc, elcStyle);
 
             onEnd();
-          }, { once: true });
-        }, 0);
-      }
-
-      function animateAbsolute(cssSize, cssOffset, topleft, U) {
-        if (!hide) {
-          show();
+          });
         }
 
-        const size = WT.px(el, cssSize),
-          hiddenU = (WT.px(el, cssOffset) + size) * (topleft ? -1 : 1);
-
-        let targetU;
-        if (hide) {
-          set(el, { transform: "translate" + U + "(0px)" }, elStyle);
-          targetU = hiddenU;
-        } else {
-          set(el, { transform: "translate" + U + "(" + hiddenU + "px)" }, elStyle);
-          targetU = 0;
-        }
+        /**
+         * @param {string} cssSize
+         * @param {string} cssOffset
+         * @param {boolean} topleft
+         * @param {string} U
+         */
+        function animateAbsolute(cssSize, cssOffset, topleft, U) {
+          if (!hide) {
+            show();
+          }
 
-        if (effects & Fade) {
-          set(el, { opacity: (hide ? 1 : 0) }, elStyle);
-        }
+          const size = WT.px(el, cssSize),
+            hiddenU = (WT.px(el, cssOffset) + size) * (topleft ? -1 : 1);
 
-        setTimeout(function() {
-          set(el, {
-            transition: "all " + duration + "ms " + cssTiming,
-            transform: "translate" + U + "(" + targetU + "px)",
-          }, elStyle);
+          const hiddenKeyframe = {
+            transform: `translate${U}(${hiddenU}px)`,
+          };
+          const visibleKeyframe = {
+            transform: `translate${U}(0px)`,
+          };
 
-          if (effects & Fade) {
-            set(el, { opacity: (hide ? 0 : 1) });
+          if (effects & Effect.Fade) {
+            hiddenKeyframe.opacity = 0;
+            visibleKeyframe.opacity = 1;
           }
 
-          el.addEventListener(transitionEventEnd, function() {
+          const keyframes = hide ? [visibleKeyframe, hiddenKeyframe] : [hiddenKeyframe, visibleKeyframe];
+          const animation = el.animate(keyframes, animationOptions);
+
+          animation.finished.then(() => {
             if (hide) {
               el.style.display = display;
             }
 
-            restore(el, elStyle);
-
             onEnd();
-          }, { once: true });
-        }, 50); // If this timeout is too small or 0, this will cause some browsers, like
-        // Chrome to sometimes not perform the animation at all.
-      }
-
-      function animateAbsoluteVertical() {
-        animateAbsolute("height", effect === SlideInFromTop ? "top" : "bottom", effect === SlideInFromTop, "Y");
-      }
-
-      function animateAbsoluteHorizontal() {
-        animateAbsolute("width", effect === SlideInFromLeft ? "left" : "right", effect === SlideInFromLeft, "X");
-      }
-
-      function animateTransition() {
-        set(el, { animationDuration: duration + "ms" }, elStyle);
-
-        if (hide) {
-          el.classList.remove("in");
+          });
         }
 
-        let cl;
-
-        switch (effect) {
-          case Pop:
-            cl = "pop";
-            break;
-          case SlideInFromLeft:
-            cl = hide ? "slide" : "slide reverse";
-            break;
-          case SlideInFromRight:
-            cl = hide ? "slide reverse" : "slide";
-            break;
+        function animateAbsoluteVertical() {
+          animateAbsolute(
+            "height",
+            effect === Effect.SlideInFromTop ? "top" : "bottom",
+            effect === Effect.SlideInFromTop,
+            "Y"
+          );
         }
 
-        cl += hide ? " out" : " in";
-
-        if (effects & Fade) {
-          cl += " fade";
+        function animateAbsoluteHorizontal() {
+          animateAbsolute(
+            "width",
+            effect === Effect.SlideInFromLeft ? "left" : "right",
+            effect === Effect.SlideInFromLeft,
+            "X"
+          );
         }
 
-        if (!hide) {
-          show();
-        }
-
-        el.classList.add(...cl.split(" ").filter((el) => el !== ""));
-        el.addEventListener(animationEventEnd, function() {
+        function animateTransition() {
           if (!hide) {
-            cl = cl.replace(" in", "");
+            show();
           }
-          el.classList.remove(...cl.split(" ").filter((el) => el !== ""));
-          if (hide) {
-            el.style.display = display;
+
+          const hiddenKeyframe = {};
+          const visibleKeyframe = {};
+          switch (effect) {
+            case Effect.Pop:
+              set(el, { transformOrigin: "50% 50%" }, elStyle);
+              hiddenKeyframe.transform = "scale(.2)";
+              visibleKeyframe.transform = "scale(1)";
+              break;
+            case Effect.SlideInFromRight:
+              hiddenKeyframe.transform = "translateX(100%)";
+              // hiddenKeyframe.clipPath = 'polygon(-100% 0%, 0% 0%, 0% 100%, -100% 100%)';
+              visibleKeyframe.transform = "translateX(0)";
+              // visibleKeyframe.clipPath = 'polygon(-100% 0%, 100% 0%, 100% 100%, -100% 100%)';
+              break;
+            case Effect.SlideInFromLeft:
+              hiddenKeyframe.transform = "translateX(-100%)";
+              // hiddenKeyframe.clipPath = 'polygon(100% 0%, 200% 0%, 200% 100%, 100% 100%)';
+              visibleKeyframe.transform = "translateX(0)";
+              // visibleKeyframe.clipPath = 'polygon(0% 0%, 200% 0%, 200% 100%, 0% 100%)';
+              break;
           }
-          restore(el, elStyle);
-          onEnd();
-        }, { once: true });
-      }
+          if (effects & Effect.Fade) {
+            hiddenKeyframe.opacity = 0;
+            visibleKeyframe.opacity = WT.css(el, "opacity");
+          }
+
+          const keyframes = hide ? [visibleKeyframe, hiddenKeyframe] : [hiddenKeyframe, visibleKeyframe];
+          const animation = el.animate(keyframes, animationOptions);
+
+          animation.finished.then(() => {
+            if (hide) {
+              el.style.display = display;
+            }
+
+            restore(el, elStyle);
 
-      setTimeout(function() {
-        const position = WT.css(el, "position"),
-          absolute = (position === "absolute" || position === "fixed");
+            onEnd();
+          });
+        }
+
+        const absolute = ["absolute", "fixed"].includes(WT.css(el, "position"));
 
         switch (effect) {
-          case SlideInFromTop:
-          case SlideInFromBottom:
-            if (!absolute) {
-              animateStaticVertical();
-            } else {
+          case Effect.SlideInFromTop:
+          case Effect.SlideInFromBottom:
+            if (absolute) {
               animateAbsoluteVertical();
+            } else {
+              animateStaticVertical();
             }
             break;
-          case SlideInFromLeft:
-          case SlideInFromRight:
+          case Effect.SlideInFromLeft:
+          case Effect.SlideInFromRight:
             if (absolute) {
               animateAbsoluteHorizontal();
             } else {
               animateTransition();
             }
             break;
-          case NoEffect:
-          case Pop:
+          case Effect.None:
+          case Effect.Pop:
             animateTransition();
             break;
         }
-      }, 0);
+      }
     }
-  };
 
-  doAnimateDisplay(id, effects, timing, duration, display);
-});
+    doAnimateDisplay(id, effects, timing, duration, display);
+  }
+);
 
 WT_DECLARE_WT_MEMBER(
   2,
diff --git a/src/js/WWebWidget.min.js b/src/js/WWebWidget.min.js
index cb3dd8f44..6296625c0 100644
--- a/src/js/WWebWidget.min.js
+++ b/src/js/WWebWidget.min.js
@@ -1 +1 @@
-WT_DECLARE_WT_MEMBER(1,JavaScriptFunction,"animateDisplay",(function(t,i,e,n,s,a){const o=t.WT,r=function(i,e,n,s,a){const l=256,c=["ease","linear","ease-in","ease-out","ease-in-out"],d=[0,1,3,2,4,5],f=o.vendorPrefix(o.styleAttribute("animation")),u=o.vendorPrefix(o.styleAttribute("transition")),p=o.vendorPrefix(o.styleAttribute("transform")),h=o.$(i),m="Webkit"===f?"webkitAnimationEnd":"animationend",y="Webkit"===u?"webkitTransitionEnd":"transitionend";if(o.css(h,"display")!==a){const L=h.parentNode;if(L.wtAnimateChild){L.wtAnimateChild(o,h,e,n,s,{display:a});return}if(h.classList.contains("animating")){h.addEventListener(y,(function(){r(i,e,n,s,a)}),{once:!0});return}h.classList.add("animating");const T=255&e,k="none"===a,x=c[k?d[n]:n],A={};function b(t,i,e){for(const n of Object.keys(i)){let s=n;"animationDuration"===s&&""!==f?s=f+s.substring(0,1).toUpperCase()+s.substring(1):"transform"===s&&""!==p?s=p+s.substring(0,1).toUpperCase()+s.substring(1):"transition"===s&&""!==u&&(s=u+s.substring(0,1).toUpperCase()+s.substring(1));e&&void 0===e[s]&&(e[s]=t.style[s]);t.style[s]=i[n]}}const C=b;function g(){h.wtAnimatedHidden&&h.wtAnimatedHidden(k);h.classList.remove("animating");t.layouts2&&t.layouts2.setElementDirty(h)}function w(){h.style.display=a;h.wtPosition&&h.wtPosition();window.onshow&&window.onshow()}function v(t,i,n,r){k||w();const c=o.px(h,t),d=(o.px(h,i)+c)*(n?-1:1);let f;if(k){b(h,{transform:"translate"+r+"(0px)"},A);f=d}else{b(h,{transform:"translate"+r+"("+d+"px)"},A);f=0}e&l&&b(h,{opacity:k?1:0},A);setTimeout((function(){b(h,{transition:"all "+s+"ms "+x,transform:"translate"+r+"("+f+"px)"},A);e&l&&b(h,{opacity:k?0:1});h.addEventListener(y,(function(){k&&(h.style.display=a);C(h,A);g()}),{once:!0})}),50)}function E(){b(h,{animationDuration:s+"ms"},A);k&&h.classList.remove("in");let t;switch(T){case 5:t="pop";break;case 1:t=k?"slide":"slide reverse";break;case 2:t=k?"slide reverse":"slide"}t+=k?" out":" in";e&l&&(t+=" fade");k||w();h.classList.add(...t.split(" ").filter((t=>""!==t)));h.addEventListener(m,(function(){k||(t=t.replace(" in",""));h.classList.remove(...t.split(" ").filter((t=>""!==t)));k&&(h.style.display=a);C(h,A);g()}),{once:!0})}setTimeout((function(){const t=o.css(h,"position"),i="absolute"===t||"fixed"===t;switch(T){case 4:case 3:i?v("height",4===T?"top":"bottom",4===T,"Y"):function(){let t,i;const n={};let r;if(k){i=o.css(h,"height");b(h,{height:i,overflow:"hidden"},A);if(4===T&&1===h.childNodes.length){r=h.firstChild;b(r,{transform:"translateY(0)"},n);o.hasTag(r,"TABLE")||b(r,{display:"block"},n)}t="0px"}else{const i={};b(L,{height:o.css(L,"height"),overflow:"hidden"},i);w();"0px"===o.css(h,"height")&&(h.style.height="auto");t=o.css(h,"height");b(h,{height:"0px",overflow:"hidden"},A);C(L,i);if(4===T){b(h,{WebkitBackfaceVisibility:"visible"},A);h.scrollTop=1e3}}e&l&&b(h,{opacity:k?1:0},A);i=h.clientHeight;setTimeout((function(){b(h,{transition:"all "+s+"ms "+x,height:t},A);e&l&&b(h,{opacity:k?0:1});r&&b(r,{transition:"all "+s+"ms "+x,transform:"translateY(-"+i+")"},n);h.addEventListener(y,(function(){k&&(h.style.display=a);C(h,A);if(4===T){h.scrollTop=0;r&&C(r,n)}g()}),{once:!0})}),0)}();break;case 1:case 2:i?v("width",1===T?"left":"right",1===T,"X"):E();break;case 0:case 5:E()}}),0)}};r(i,e,n,s,a)}));WT_DECLARE_WT_MEMBER(2,JavaScriptFunction,"animateVisible",(function(t,i,e,n,s,a,o,r){}));
\ No newline at end of file
+WT_DECLARE_WT_MEMBER(1,JavaScriptFunction,"animateDisplay",(function(t,n,i,s,e,o){const a=t.WT;!function n(i,s,e,o,r){const c=0,d=1,l=2,p=3,f=4,m=5,h=256,u=["ease","linear","ease-in","ease-out","ease-in-out"],y=[0,1,3,2,4,5],g=document.getElementById(i),w=1===g.childElementCount?g.firstElementChild:null;function b(t,n,i){for(const s of Object.keys(n)){i&&void 0===i[s]&&(i[s]=t.style[s]);t.style[s]=n[s]}}const x=b;if((()=>{const t={},n=a.css(g,"display");b(g,{display:r},t);const i=a.css(g,"display");x(g,t);return n!==i})()){const A=g.parentNode;if(A.wtAnimateChild){A.wtAnimateChild(a,g,s,e,o,{display:r});return}if(g.classList.contains("animating")){Promise.all(g.getAnimations().map((t=>t.finished))).then((()=>{n(i,s,e,o,r)}));return}g.classList.add("animating");const C=255&s,v="none"===r,R={},$={},_={duration:o,iterations:1,easing:u[v?y[e]:e]};function E(){g.wtAnimatedHidden&&g.wtAnimatedHidden(v);0===g.getAnimations().length&&g.classList.remove("animating");t.layouts2&&t.layouts2.setElementDirty(g)}function B(){g.style.display=r;g.wtPosition&&g.wtPosition();window.onshow&&window.onshow()}function T(t,n,i,e){v||B();const o=a.px(g,t),c={transform:`translate${e}(${(a.px(g,n)+o)*(i?-1:1)}px)`},d={transform:`translate${e}(0px)`};if(s&h){c.opacity=0;d.opacity=1}const l=v?[d,c]:[c,d];g.animate(l,_).finished.then((()=>{v&&(g.style.display=r);E()}))}function W(){v||B();const t={},n={};switch(C){case m:b(g,{transformOrigin:"50% 50%"},R);t.transform="scale(.2)";n.transform="scale(1)";break;case l:t.transform="translateX(100%)";n.transform="translateX(0)";break;case d:t.transform="translateX(-100%)";n.transform="translateX(0)"}if(s&h){t.opacity=0;n.opacity=a.css(g,"opacity")}const i=v?[n,t]:[t,n];g.animate(i,_).finished.then((()=>{v&&(g.style.display=r);x(g,R);E()}))}const k=["absolute","fixed"].includes(a.css(g,"position"));switch(C){case f:case p:k?T("height",C===f?"top":"bottom",C===f,"Y"):function(){v||B();b(g,{overflow:"hidden"},R);const t=[],n=(()=>{if(!w)return null;const t=g.getBoundingClientRect(),n=w.getBoundingClientRect();return{left:n.x-t.x-a.px(g,"border-left-width"),top:n.y-t.y-a.px(g,"border-top-width")}})();if(w&&C===f){const n={transform:"translateY(0px)"},i={transform:`translateY(-${g.clientHeight}px)`},s=v?[n,i]:[i,n];t.push(w.animate(s,_))}{const n={height:"0px",paddingTop:"0px",paddingBottom:"0px",borderTopWidth:"0px",borderBottomWidth:"0px"},i={height:a.css(g,"height"),paddingTop:a.css(g,"padding-top"),paddingBottom:a.css(g,"padding-bottom"),borderTopWidth:a.css(g,"border-top-width"),borderBottomWidth:a.css(g,"border-bottom-width")};if(s&h){n.opacity=0;i.opacity=1}const e=v?[i,n]:[n,i];t.push(g.animate(e,_))}if(w){b(g,{position:"relative"},R);const t={position:"absolute",left:`${n.left}px`,top:`${n.top}px`};b(w,t,$)}Promise.all(t.map((t=>t.finished))).then((()=>{v&&(g.style.display=r);x(g,R);x(w,$);E()}))}();break;case d:case l:k?T("width",C===d?"left":"right",C===d,"X"):W();break;case c:case m:W()}}}(n,i,s,e,o)}));WT_DECLARE_WT_MEMBER(2,JavaScriptFunction,"animateVisible",(function(t,n,i,s,e,o,a,r){}));
\ No newline at end of file
