YALB-1498: Components: Card animation | YALB-1500: Components Dividers animation | YALB-1502: Components: Quote animation

components/00-tokens/effects/_effects.scss

@@ -97,3 +97,49 @@
 
   background-size: 0 var(--thickness);
 }
+
+// Animate upward on hover: cards
+@mixin rise-effect($amount: -0.25em) {
+  @media (prefers-reduced-motion: no-preference) {
+    transform: translateY(0);
+
+    &:hover {
+      transform: translateY($amount);
+      color: var(--color-cta-text);
+      background-color: var(--color-cta-bg);
+    }
+  }
+}
+
+// Animate center outwards: divider
+@mixin expand-out {
+  // only set scale to 0 if animation can run
+  @media (prefers-reduced-motion: no-preference) {
+    transform: scaleX(0);
+
+    &.animate {
+      transform: scaleX(1);
+    }
+  }
+}
+
+// Animate and fade-in upwards: pull quote
+@mixin fade-in-up {
+  // only run animation if animation can run
+  @media (prefers-reduced-motion: no-preference) {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+
+    &.animate {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+@mixin expand-height($height: 100%) {
+  // only run animation if animation can run
+  @media (prefers-reduced-motion: no-preference) {
+    height: $height;
+  }
+}

components/00-tokens/effects/yds-animate.js

@@ -0,0 +1,50 @@
+Drupal.behaviors.animateItems = {
+  attach(context) {
+    // Check if animation is active in site settings.
+    const siteAnimationTheme = context.querySelector('[data-site-animation]');
+
+    // Set variable to check that the animation theme isn't the default.
+    const siteAnimationEnabled =
+      siteAnimationTheme.getAttribute('data-site-animation') !== 'default';
+
+    // Select all elements with [data-animate-item] attribute
+    const elementsToAnimate = context.querySelectorAll(
+      '[data-animate-item="true"]',
+    );
+
+    // Check if the user prefers reduced motion
+    const prefersReducedMotionNoPref = window.matchMedia(
+      '(prefers-reduced-motion: no-preference)',
+    ).matches;
+
+    // Create a new Intersection Observer
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const animatedElement = entry.target;
+
+        if (entry.isIntersecting) {
+          // If the element is in the viewport, add the 'animate' class
+          animatedElement.classList.add('animate');
+        }
+      });
+    });
+    // Only add observer if siteAnimationEnabled, there are elements to animate,
+    // and if user hasn't enabled reduced motion.
+    if (
+      elementsToAnimate &&
+      siteAnimationEnabled &&
+      prefersReducedMotionNoPref
+    ) {
+      // Observe each .divider element
+      elementsToAnimate.forEach((animatedElement) => {
+        observer.observe(animatedElement);
+      });
+    }
+    // Set each component to data-animate-item false if prefers reduced motion.
+    if (!prefersReducedMotionNoPref) {
+      elementsToAnimate.forEach((reducedMotionElement) => {
+        reducedMotionElement.setAttribute('data-animate-item', 'false');
+      });
+    }
+  },
+};

components/01-atoms/divider/_yds-divider.scss

@@ -29,4 +29,15 @@ $divider-positions: left, center;
   background: var(--color-divider);
   width: var(--width-divider);
   height: var(--thickness-divider);
+
+  // if animation is active
+  [data-site-animation='artistic'] & {
+    &[data-animate-item='true'] {
+      @include tokens.animate(
+        $property: 'transform',
+        $duration: var(--animation-speed-slow)
+      );
+      @include tokens.expand-out;
+    }
+  }
 }

components/01-atoms/divider/divider.stories.js

@@ -3,6 +3,7 @@ import tokens from '@yalesites-org/tokens/build/json/tokens.json';
 import dividerTwig from './yds-divider.twig';
 
 import './cl-dividers.scss';
+import '../../00-tokens/effects/yds-animate';
 
 const layoutOptions = ['left', 'center'];
 const thicknessOptions = Object.keys(tokens.border.thickness);

components/01-atoms/divider/yds-divider.twig

@@ -9,6 +9,7 @@
 {% set divider__position = divider__position|default('center')|lower %}
 {% set divider__width = divider__width|default('100') %}
 {% set divider__component_width = divider__component_width|default('site') %}
+{% set divider__attributes = divider__attributes|default({}) %}
 
 {% set divider__wrapper__attributes = {
   'data-component-width': divider__component_width,
@@ -20,15 +21,19 @@
   class: bem('inner', [], divider__base_class),
 } %}
 
-{% set divider__attributes = {
+{% if animate__item == true %}
+	{% set divider__attributes = divider__attributes|merge({
+    'data-animate-item': animate__item,
+  }) %}
+{% endif %}
+
+{% set divider__attributes = divider__attributes|merge({
   class: bem(divider__base_class),
   'data-divider-width': divider__width,
-} %}
+}) %}
 
-<div {{ add_attributes(divider__wrapper__attributes) }}>
-  {% block prefix_suffix %}
-  {% endblock %}
-  <div {{ add_attributes(divider__inner__attributes) }}>
-    <div {{ add_attributes(divider__attributes) }}></div>
-  </div>
+<div {{ add_attributes(divider__wrapper__attributes) }}> {% block prefix_suffix %}{% endblock %}
+	<div {{ add_attributes(divider__inner__attributes) }}>
+		<div {{ add_attributes(divider__attributes) }}></div>
+	</div>
 </div>

components/02-molecules/cards/custom-card/_yds-custom-card.scss

@@ -7,6 +7,12 @@ $global-card-themes: map.deep-get(tokens.$tokens, 'global-themes');
 .custom-card {
   @include atoms.clickable-component-heading-link;
 
+  // only animate if animation is enabled in site configuration.
+  [data-site-animation='artistic'] & {
+    @include tokens.animate($property: 'transform');
+    @include tokens.rise-effect;
+  }
+
   --card-border: 1px solid var(--color-gray-200);
   --color-text-shadow: var(--color-basic-white);
   --color-card-bar-long: var(--color-blue-light);

components/02-molecules/cards/reference-card/_yds-reference-card.scss

@@ -8,6 +8,12 @@ $break-card-collection-list-image-max: tokens.$break-s - 0.05;
   @include atoms.clickable-component-heading-link;
   @include atoms.clickable-component-image;
 
+  // only animate if animation is enabled in site configuration.
+  [data-site-animation='artistic'] & {
+    @include tokens.animate($property: 'transform');
+    @include tokens.rise-effect;
+  }
+
   --color-text-shadow: var(--color-basic-white);
 
   display: flex;

components/02-molecules/pull-quote/_yds-pull-quote.scss

@@ -14,6 +14,17 @@ blockquote {
 
   @include tokens.spacing-page-section;
 
+  // if animation is active
+  [data-site-animation='artistic'] & {
+    &[data-animate-item='true'] {
+      @include tokens.animate(
+        $property: 'transform',
+        $duration: var(--animation-speed-slow)
+      );
+      @include tokens.fade-in-up;
+    }
+  }
+
   // Global themes: set color slots for each theme
   // This establishes `--color-slot-` variables name-spaced to the selector
   // in which it is used. We can map component-level variables to global-level
@@ -55,27 +66,49 @@ blockquote {
 }
 
 .pull-quote__figure {
+  --pull-quote-border-height: 100%;
+
   @media (min-width: tokens.$break-mobile) {
     max-width: calc(var(--size-component-layout-width-content) - 11rem);
   }
 
   [data-pull-quote-style='bar-left'] & {
+    position: relative;
     padding-left: var(--size-spacing-6);
-    border-left: var(--border-thickness-4) solid var(--color-pull-quote-accent);
 
     @media (min-width: tokens.$break-mobile) {
       margin-left: var(--size-spacing-7);
     }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: calc(var(--border-thickness-4) * -1);
+      bottom: 0;
+      height: var(--pull-quote-border-height);
+      width: var(--border-thickness-4);
+      background-color: var(--color-pull-quote-accent);
+    }
   }
 
   [data-pull-quote-style='bar-right'] & {
+    position: relative;
     padding-right: var(--size-spacing-6);
-    border-right: var(--border-thickness-4) solid var(--color-pull-quote-accent);
     text-align: right;
 
     @media (min-width: tokens.$break-mobile) {
       margin-left: 9rem;
     }
+
+    &::before {
+      content: '';
+      position: absolute;
+      right: calc(var(--border-thickness-4) * -1);
+      bottom: 0;
+      height: var(--pull-quote-border-height);
+      width: var(--border-thickness-4);
+      background-color: var(--color-pull-quote-accent);
+    }
   }
 
   [data-pull-quote-style='quote-left'] & {
@@ -97,6 +130,38 @@ blockquote {
       margin-left: var(--size-spacing-6);
     }
   }
+
+  // if animation is active
+  // prettier-ignore
+  [data-site-animation='artistic'] [data-pull-quote-style='bar-left'][data-animate-item='true'] &,
+  [data-site-animation='artistic'] [data-pull-quote-style='bar-right'][data-animate-item='true'] & {
+    @include tokens.animate($duration: var(--animation-speed-default));
+
+    --pull-quote-border-height: 0;
+
+    &::before {
+      --animation-speed-mid-slow: 400ms;
+
+      height: var(--pull-quote-border-height);
+
+      @include tokens.animate(
+        $property: height,
+        $duration: var(--animation-speed-mid-slow),
+        $delay: 400ms
+      );
+    }
+  }
+
+  // when the animate class is added, animate the quote bar height.
+  // prettier-ignore
+  [data-site-animation='artistic'] [data-pull-quote-style='bar-left'][data-animate-item='true'].animate &,
+  [data-site-animation='artistic'] [data-pull-quote-style='bar-right'][data-animate-item='true'].animate & {
+    --pull-quote-border-height: 100%;
+
+    &::before {      
+      @include tokens.expand-height(--pull-quote-border-height);
+    }
+  }
 }
 
 .pull-quote__quote {

components/02-molecules/pull-quote/yds-pull-quote.twig

@@ -13,6 +13,13 @@
 {# If pull_quote__attributes is not defined, set it to an empty object by default #}
 {% set pull_quote__attributes = pull_quote__attributes|default({}) %}
 
+{% if animate__item == true %}
+	{% set pull_quote__attributes = pull_quote__attributes|merge({
+    'data-animate-item': animate__item,
+  }) %}
+{% endif %}
+
+
 {% set pull_quote__attributes = pull_quote__attributes|merge({
   'data-component-width': pull_quote__width|default('content'),
   'data-pull-quote-style': pull_quote__style,
@@ -21,17 +28,15 @@
   class: bem(pull_quote__base_class, pull_quote__modifiers),
 }) %}
 
-<div {{ add_attributes(pull_quote__attributes) }}>
-  {% block prefix_suffix %}
-  {% endblock %}
-  <div {{ bem('inner', [], pull_quote__base_class) }}>
-    <figure {{ bem('figure', [], pull_quote__base_class) }}>
-      <blockquote {{ bem('quote', [], pull_quote__base_class) }}>
-        {{ pull_quote__quote }}
-      </blockquote>
-      {% if pull_quote__attribution %}
-        <figcaption {{ bem('attribution', [], pull_quote__base_class) }}>—{{ pull_quote__attribution }}</figcaption>
-      {% endif %}
-    </figure>
-  </div>
+<div {{ add_attributes(pull_quote__attributes) }}> {% block prefix_suffix %}{% endblock %}
+	<div {{ bem('inner', [], pull_quote__base_class) }}>
+		<figure {{ bem('figure', [], pull_quote__base_class) }}>
+			<blockquote {{ bem('quote', [], pull_quote__base_class) }}>
+				{{ pull_quote__quote }}
+			</blockquote>
+			{% if pull_quote__attribution %}
+				<figcaption {{ bem('attribution', [], pull_quote__base_class) }}>—{{ pull_quote__attribution }}</figcaption>
+			{% endif %}
+		</figure>
+	</div>
 </div>

components/04-page-layouts/_yds-base.twig

@@ -11,6 +11,12 @@
   }) %}
 {% endif %}
 
+{% if site_animate_components %}
+  {% set layout__attributes = layout__attributes|merge({
+    'data-site-animation': site_animate_components,
+  }) %}
+{% endif %}
+
 <div {{ add_attributes(layout__attributes) }} >
   {# Page Header #}
   {% block page__header %}

components/05-page-examples/events/event-page.twig

@@ -28,6 +28,7 @@
     } %}
     {% include "@atoms/divider/yds-divider.twig" with {
       divider__component_width: 'content',
+      animate__item: [true],
     }%}
     {% include "@molecules/text/yds-text-field.twig" with {
       text_field__width: 'content',