ISTWCMS-5309:js attempts to get the transition speed

source/_patterns/00-config/_animate.scss

+@charset "UTF-8";
+/*!
+ * animate.css - https://animate.style/
+ * Version - 4.1.1
+ * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
+ *
+ * Copyright (c) 2022 Animate.css
+ */
+:root {
+  --animate-duration: 1s;
+  --animate-delay: 1s;
+  --animate-repeat: 1;
+}
+.animate__animated {
+
+  animation-duration: 1s;
+  animation-duration: var(--animate-duration);
+  animation-fill-mode: both;
+}
+.animate__animated.animate__infinite {
+  animation-iteration-count: infinite;
+}
+.animate__animated.animate__repeat-1 {
+  animation-iteration-count: 1;
+  animation-iteration-count: var(--animate-repeat);
+}
+.animate__animated.animate__repeat-2 {
+  animation-iteration-count: calc(1 * 2);
+  animation-iteration-count: calc(var(--animate-repeat) * 2);
+}
+.animate__animated.animate__repeat-3 {
+  animation-iteration-count: calc(1 * 3);
+  animation-iteration-count: calc(var(--animate-repeat) * 3);
+}
+.animate__animated.animate__delay-1s {
+  animation-delay: 1s;
+  animation-delay: var(--animate-delay);
+}
+.animate__animated.animate__delay-2s {
+  animation-delay: calc(1s * 2);
+  animation-delay: calc(var(--animate-delay) * 2);
+}
+.animate__animated.animate__delay-3s {
+  animation-delay: calc(1s * 3);
+  animation-delay: calc(var(--animate-delay) * 3);
+}
+.animate__animated.animate__delay-4s {
+  animation-delay: calc(1s * 4);
+  animation-delay: calc(var(--animate-delay) * 4);
+}
+.animate__animated.animate__delay-5s {
+  animation-delay: calc(1s * 5);
+  animation-delay: calc(var(--animate-delay) * 5);
+}
+.animate__animated.animate__faster {
+  animation-duration: calc(1s / 2);
+  animation-duration: calc(var(--animate-duration) / 2);
+}
+.animate__animated.animate__fast {
+  animation-duration: calc(1s * 0.8);
+  animation-duration: calc(var(--animate-duration) * 0.8);
+}
+.animate__animated.animate__slow {
+  animation-duration: calc(1s * 2);
+  animation-duration: calc(var(--animate-duration) * 2);
+}
+.animate__animated.animate__slower {
+  animation-duration: calc(1s * 3);
+  animation-duration: calc(var(--animate-duration) * 3);
+}
+@media print, (prefers-reduced-motion: reduce) {
+  .animate__animated {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+
+  }
+
+  .animate__animated[class*='Out'] {
+    opacity: 0;
+  }
+}
+/* Fading entrances  */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+.animate__fadeIn {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInDown {
+  animation-name: fadeInDown;
+}
+
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInDownBig {
+  animation-name: fadeInDownBig;
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInLeft {
+  animation-name: fadeInLeft;
+}
+
+@keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInLeftBig {
+  animation-name: fadeInLeftBig;
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInRight {
+  animation-name: fadeInRight;
+}
+@keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInRightBig {
+  animation-name: fadeInRightBig;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInUp {
+  animation-name: fadeInUp;
+}
+
+@keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInUpBig {
+  animation-name: fadeInUpBig;
+}
+
+@keyframes fadeInTopLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInTopLeft {
+  animation-name: fadeInTopLeft;
+}
+
+@keyframes fadeInTopRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInTopRight {
+  animation-name: fadeInTopRight;
+}
+
+@keyframes fadeInBottomLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInBottomLeft {
+  animation-name: fadeInBottomLeft;
+}
+
+@keyframes fadeInBottomRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate__fadeInBottomRight {
+  animation-name: fadeInBottomRight;
+}
+/* Fading exits */
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+.animate__fadeOut {
+  animation-name: fadeOut;
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+.animate__fadeOutDown {
+  animation-name: fadeOutDown;
+}
+
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+.animate__fadeOutDownBig {
+
+  animation-name: fadeOutDownBig;
+}
+
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+.animate__fadeOutLeft {
+
+  animation-name: fadeOutLeft;
+}
+
+@keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+.animate__fadeOutLeftBig {
+  animation-name: fadeOutLeftBig;
+}
+
+@keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+.animate__fadeOutRightBig {
+  animation-name: fadeOutRightBig;
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+.animate__fadeOutUp {
+  animation-name: fadeOutUp;
+}
+
+@keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+.animate__fadeOutUpBig {
+  animation-name: fadeOutUpBig;
+}
+
+@keyframes fadeOutTopLeft {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, -100%, 0);
+  }
+}
+.animate__fadeOutTopLeft {
+  animation-name: fadeOutTopLeft;
+}
+
+@keyframes fadeOutTopRight {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(100%, -100%, 0);
+  }
+}
+.animate__fadeOutTopRight {
+  animation-name: fadeOutTopRight;
+}
+
+@keyframes fadeOutBottomRight {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 100%, 0);
+  }
+}
+.animate__fadeOutBottomRight {
+  animation-name: fadeOutBottomRight;
+}
+
+@keyframes fadeOutBottomLeft {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 100%, 0);
+  }
+}
+.animate__fadeOutBottomLeft {
+  animation-name: fadeOutBottomLeft;
+}

source/_patterns/04-components/banners/_banners.scss

 .uw-carousel{
   &__banner{
+    // Used to control the display of the play-pause
+    &[data-autoplay="1"]{
+      .uw-owl-nav__banner-control-wrap{
+          display:block;
+        }
+      &.banner-single{
+        .uw-owl-nav__banner-control-wrap{
+          display:none;
+        }
+      }
+    }
+
+    &[data-autoplay="0"]{
+      .uw-owl-nav__banner-control-wrap{
+        display:none;
+      }
+    }
     .uw-owl-nav__banner-control-wrap {
       bottom:1.5rem;
+      display:none;
       font-size: gesso-font-size(3);
       left: 0.5rem;
       order: 4;
@@ -37,6 +55,9 @@
         background:gesso-color(button, default, background);
         border-bottom:1px solid gesso-color(button, default, background);
         display:flex;
+        &.disabled{
+          display:none;
+        }
         gap:1px;
         order:3;
         .owl-dot{
@@ -58,14 +79,12 @@
         }
       }
       .uw-owl-nav__prevnext{
-        display: flex;
+        // Replace with display: flex; when theming
+        // other banners.styles
+        display:none;
         &.disabled{
           display:none;
         }
-        // Get code for homepage banner
-        .replace-with-homepage-banner-class & {
-          display: flex;
-        }
         flex-flow: column;
         opacity:0;
         position:absolute;
@@ -111,18 +130,7 @@
         }
       }
     }
-    // Used to control the display of the play-pause
-    &[data-autoplay="1"]{
-      .uw-owl-nav__banner-control-wrap{
-        display:block;
-      }
-    }
-    &[data-autoplay="0"]{
-      .uw-owl-nav__banner-control-wrap{
-        display:none;
-      }
-    }
-    // CSS classes set by the types of banner chosen
+    // CSS classes set by the types of banner
     // to allow for 4 different styles.
     &-full-overlay{
       //
@@ -139,7 +147,31 @@
   }
 }
 .no-js {
-
+  .uw-carousel{
+    &__banner {
+      &[data-autoplay="1"] {
+        .uw-owl-nav__banner-control-wrap {
+          display: none;
+        }
+      }
+    }
+  }
+  &.js{
+    .uw-carousel{
+      &__banner {
+        &[data-autoplay="1"] {
+          .uw-owl-nav__banner-control-wrap {
+            display: inherit;
+          }
+          &.banner-single{
+            .uw-owl-nav__banner-control-wrap{
+              display:none;
+            }
+          }
+        }
+      }
+    }
+  }
   .uw-owl-nav__dots-js {
     align-items: flex-start;
     background: gesso-color(button, default, background);
@@ -172,10 +204,21 @@
    .card__banner {
     display: none;
   }
-
+  &.js{
+    .card__banner:target ~ .card__banner:last-of-type,
+    .card__banner {
+      display: inherit;
+    }
+  }
   /* :last-child works, but .page:last-child will not */
     .card__banner:last-of-type,
     .card__banner:target {
     display: block;
   }
+  &.js{
+    .card__banner:last-of-type,
+    .card__banner:target {
+      display: inherit;
+    }
+  }
 }

source/_patterns/04-components/banners/banners.js

@@ -11,10 +11,9 @@
         $('.uw-carousel__banner').each(function () {
 
           var selector = 'div[data-uuid="' + $(this).attr("data-uuid") + '"] .owl-carousel';
-
+          // var item_selector = 'div[data-uuid="' + $(this).attr("data-uuid") + '"] .owl-carousel .animated';
           // Get  banner carousel.
           var owl =  $(selector);
-
           // Get the number of items for the carousel, if any.
           // For banners we are only ever showing one item at
           // a time (for reference Facts & Figures show more).
@@ -23,7 +22,9 @@
           // Get the transition speed for the carousel.
           var banner_transition_speed = $(this).attr('data-transition-speed');
 
-          // Get the slide speed for the carousel.
+          //Set the css animation speed for the transitions
+          // $(item_selector).css('animation-duration' , banner_transition_speed + 'ms !important');
+
           var banner_slide_speed = $(this).attr('data-slide-speed');
 
           // The flag for autoplay.
@@ -34,6 +35,10 @@
             banner_autoplay = false;
           }
 
+          // Used to hide buttons when single banner
+          if (owl.children().length <= 1) {
+            $(this).addClass('banner-single');
+          }
 
           // Get the loop value.
           // Owl carousel setting to loop back to beginning.
@@ -72,6 +77,7 @@
 
           // Add the carousel to the banner using the id.
           owl.owlCarousel({
+            animateIn: 'fadeIn',
             animateOut: 'fadeOut',
             autoplay: banner_autoplay,
             autoplayTimeout: banner_slide_speed,
@@ -98,7 +104,7 @@
                 items: num_of_items
 
               }
-            }
+            },
           });
         });
       });