@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/atomic/animations/brand/chevron-flow.mjs

@@ -0,0 +1,278 @@
+const ELEMENT_CONTAINER = "animation-overlay-container";
+const ELEMENT_LAYER_OVERLAY_CONTAINER = "animation-overlay-layer-container";
+const ELEMENT_LAYER_RED_ARROW_CONTAINER = "animation-overlay-layer-red-arrow-container";
+const ELEMENT_LAYER_BLACK_ARROW_CONTAINER = "animation-overlay-layer-black-arrow-container";
+const ELEMENT_GENERIC_ARROW = "aninmation-arrow";
+const ID_OVERLAY_LEFT = "animation-overlay-left";
+const ID_OVERLAY_RIGHT = "animation-overlay-right";
+const ID_SLIDE_IN_RED = "slide-in-red-arrow";
+const ID_ARROW_BEHIND_OVERLAY = "animation-overlay-arrow";
+const ID_ARROW_BEHIND_FOLLOWING = "animation-following-arrow";
+const ID_ARROW_BEHIND_FOLLOWING_TWO = "animation-following-arrow-two";
+const TIMING_ANIMATION_ARROW_FIRST_TIME_IN = 1200;
+const TIMING_ANIMATION_ARROW_FIRST_TIME_OUT = 4500;
+const FollowingArrowStyles = `
+  .${ELEMENT_LAYER_BLACK_ARROW_CONTAINER} {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-140%, -50%);
+    height: 100%;
+    z-index: 99;
+  }
+
+  .${ELEMENT_LAYER_BLACK_ARROW_CONTAINER} path {
+    fill: #000;
+  }
+
+  #${ID_ARROW_BEHIND_FOLLOWING} {
+    transform: translateX(-90%);
+  }
+`;
+const MainArrowStyles = `
+  .${ELEMENT_LAYER_RED_ARROW_CONTAINER} {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-100%, -50%);
+    z-index: 999;
+    display: flex;
+    align-items: center;
+  }
+
+  .${ELEMENT_GENERIC_ARROW} {
+    height: 100%;
+  }
+`;
+const OverlayStyles = `
+  .${ELEMENT_LAYER_OVERLAY_CONTAINER} {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: auto;
+    height: auto;
+    min-width: 100%;
+    min-height: 100%;
+    z-index: 9;
+    display: flex;
+  }
+
+  #${ID_OVERLAY_RIGHT} {
+    width: 50%;
+  }
+
+  #${ID_OVERLAY_LEFT} {
+    width: 50%;
+  }
+
+  #${ID_ARROW_BEHIND_OVERLAY} {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-60%, -50%);
+    height: 100%;
+    z-index: 9;
+    fill: #000;
+  }
+
+  #${ID_ARROW_BEHIND_OVERLAY} path {
+    fill: #000;
+  }
+`;
+const STYLES_ANIMATION_BRAND_OVERLAY_ELEMENT = `
+  ${OverlayStyles}
+  ${MainArrowStyles}
+  ${FollowingArrowStyles}
+
+  @media (prefers-reduced-motion: reduce) {
+    .${ELEMENT_CONTAINER} svg {
+      display: none;
+    }
+  }
+`;
+const CreateAnimatioOverlayContainer = (props) => {
+  const { container } = props;
+  const wrapper = document.createElement("div");
+  const SVG_OVERLAY_LEFT = `<svg id="${ID_OVERLAY_LEFT}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="60 0 857.57 976"><defs><style>.overlay-left{fill:#000;fill-rule:evenodd;stroke-width:0px;}</style></defs><path class="overlay-left" d="M492.28,0H0v976h503.46l414.11-481.49L492.28,0Z"/></svg>`;
+  const SVG_OVERLAY_RIGHT = `<svg id="${ID_OVERLAY_RIGHT}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 690.15 976"><defs><style>.overlay-right{fill:#000;fill-rule:evenodd;stroke-width:0px;}</style></defs><path class="overlay-right" d="M11.18,976l414.11-481.49L0,0h690.15v976H11.18Z"/></svg>`;
+  wrapper.classList.add(ELEMENT_LAYER_OVERLAY_CONTAINER);
+  wrapper.innerHTML = `${SVG_OVERLAY_LEFT} ${SVG_OVERLAY_RIGHT}`;
+  container.appendChild(wrapper);
+  return wrapper;
+};
+const CreateAnimationArrowContainer = (props) => {
+  const { container, id, wrapperStyleRef } = props;
+  const wrapper = document.createElement("div");
+  const SVG_ANIMATION_ARROW = `<svg id="${id}" class="${ELEMENT_GENERIC_ARROW}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 973.01 976"><defs><style>.arrow-video{fill:#e21833;fill-rule:evenodd;}</style></defs><path class="arrow-video" d="m427.44,497.01L0,0h545.57l427.44,497.01-411.96,478.99H15.48l411.96-478.99Z"/></svg>`;
+  if (wrapperStyleRef) {
+    wrapper.classList.add(wrapperStyleRef);
+  }
+  wrapper.innerHTML = `${SVG_ANIMATION_ARROW}`;
+  container.appendChild(wrapper);
+  return wrapper;
+};
+const SizeElements = {
+  Arrow: ({ arrow, height }) => {
+    arrow.style.height = `${height}px`;
+  },
+  Arrows: (props) => {
+    const { container, getContainerHeight } = props;
+    const height = getContainerHeight();
+    const ArrowContainers = Array.from(
+      container.querySelectorAll(`.${ELEMENT_GENERIC_ARROW}`)
+    );
+    ArrowContainers.forEach((arrow) => SizeElements.Arrow({ arrow, height }));
+  },
+  All: (props) => {
+    SizeElements.Arrows(props);
+  }
+};
+const AnimateFollowingArrows = (props) => {
+  const { container } = props;
+  const arrow = container.querySelector(
+    `#${ID_ARROW_BEHIND_FOLLOWING}`
+  );
+  const arrowTwo = container.querySelector(
+    `#${ID_ARROW_BEHIND_FOLLOWING_TWO}`
+  );
+  setTimeout(() => {
+    arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 2400}ms ease-in-out`;
+    arrow.style.transform = `translateX(200vw)`;
+  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN + 120);
+  setTimeout(() => {
+    arrowTwo.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 2800}ms ease-in-out`;
+    arrowTwo.style.transform = `translateX(200vw)`;
+  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN + 200);
+};
+const AnimateMainArrow = (props) => {
+  const { container, getContainerHeight, getHeightDiff } = props;
+  const arrow = container.querySelector(
+    `#${ID_SLIDE_IN_RED}`
+  );
+  const height = getContainerHeight();
+  const overlayLeft = container.querySelector(
+    `#${ID_OVERLAY_LEFT}`
+  );
+  const overlayPosition = overlayLeft.getBoundingClientRect();
+  const arrowPosition = arrow.getBoundingClientRect();
+  const diff = getHeightDiff();
+  const alignment = overlayPosition.width / 2 + Math.abs(arrowPosition.left) + diff - Math.abs(overlayPosition.left);
+  SizeElements.Arrow({ arrow, height });
+  arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_IN}ms ease-in-out`;
+  arrow.style.transform = `translateX(${alignment}px)`;
+  setTimeout(() => {
+    arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_OUT}ms ease-in-out`;
+    arrow.style.transform = `translateX(${alignment * 3}px)`;
+  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN);
+};
+const AnimateOverlay = (props) => {
+  const { container, completedCallback } = props;
+  const partOne = container.querySelector(`#${ID_OVERLAY_LEFT}`);
+  const partTwo = container.querySelector(`#${ID_OVERLAY_RIGHT}`);
+  const partThree = container.querySelector(
+    `#${ID_ARROW_BEHIND_OVERLAY}`
+  );
+  const endPosition = window.innerWidth * 2;
+  const FIRST_ELEMENT_TIME_OUT = 3500;
+  const SYNC_TIME = TIMING_ANIMATION_ARROW_FIRST_TIME_IN + FIRST_ELEMENT_TIME_OUT - 3e3;
+  const completedTiming = TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 3600;
+  setTimeout(() => {
+    partTwo.style.transition = `transform ${FIRST_ELEMENT_TIME_OUT}ms ease-in-out`;
+    partTwo.style.transform = `translateX(${endPosition}px`;
+  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN - 200);
+  setTimeout(() => {
+    partOne.style.transition = `transform ${completedTiming}ms ease-in-out`;
+    partOne.style.transform = `translateX(${endPosition}px`;
+  }, SYNC_TIME + 100);
+  setTimeout(() => {
+    partThree.style.transition = `transform ${completedTiming}ms ease-in-out`;
+    partThree.style.transform = `translate(${endPosition}px, -50%)`;
+  }, SYNC_TIME + 50);
+  if (completedCallback) {
+    setTimeout(() => completedCallback(), SYNC_TIME);
+  }
+};
+const AnimationSequence = (props) => {
+  AnimateOverlay(props);
+  AnimateMainArrow(props);
+  AnimateFollowingArrows(props);
+};
+const chevronFlow = ({
+  sizedContainer,
+  completedCallback,
+  isAnimationOnLoad = true
+}) => (() => {
+  const container = document.createElement("div");
+  let windowWidth = window.innerWidth;
+  let styles = STYLES_ANIMATION_BRAND_OVERLAY_ELEMENT;
+  const getContainerHeight = () => sizedContainer.offsetHeight;
+  const getHeightDiff = () => {
+    return sizedContainer.offsetHeight;
+  };
+  const data = {
+    container,
+    getHeightDiff,
+    getContainerHeight,
+    completedCallback
+  };
+  const overlay = CreateAnimatioOverlayContainer(data);
+  const overlayArrow = CreateAnimationArrowContainer({
+    ...data,
+    id: ID_ARROW_BEHIND_OVERLAY
+  });
+  const slideInArrow = CreateAnimationArrowContainer({
+    ...data,
+    id: ID_SLIDE_IN_RED,
+    wrapperStyleRef: ELEMENT_LAYER_RED_ARROW_CONTAINER
+  });
+  const slideInArrowBlackOne = CreateAnimationArrowContainer({
+    ...data,
+    id: ID_ARROW_BEHIND_FOLLOWING,
+    wrapperStyleRef: ELEMENT_LAYER_BLACK_ARROW_CONTAINER
+  });
+  const slideInArrowBlackTwo = CreateAnimationArrowContainer({
+    ...data,
+    id: ID_ARROW_BEHIND_FOLLOWING_TWO,
+    wrapperStyleRef: ELEMENT_LAYER_BLACK_ARROW_CONTAINER
+  });
+  const EventLoad = () => {
+    if (isAnimationOnLoad) {
+      AnimationSequence(data);
+      return;
+    }
+    const scrollEvent = () => {
+      const containerPosition = container.getBoundingClientRect();
+      const top = containerPosition.top;
+      if (top < window.innerHeight && window.scrollY !== 0) {
+        AnimationSequence(data);
+        window.removeEventListener("scroll", scrollEvent);
+      }
+    };
+    window.addEventListener("scroll", scrollEvent);
+  };
+  const EventResize = () => {
+    if (windowWidth !== window.innerWidth) {
+      window.removeEventListener("resize", EventResize);
+      container.remove();
+    }
+  };
+  container.classList.add(ELEMENT_CONTAINER);
+  container.appendChild(overlay);
+  container.appendChild(overlayArrow);
+  container.appendChild(slideInArrow);
+  container.appendChild(slideInArrowBlackOne);
+  container.appendChild(slideInArrowBlackTwo);
+  window.addEventListener("resize", EventResize);
+  return {
+    element: container,
+    styles,
+    events: {
+      load: EventLoad
+    }
+  };
+})();
+export {
+  chevronFlow as default
+};
+//# sourceMappingURL=chevron-flow.mjs.map

package/dist/atomic/animations/brand/chevron-flow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-flow.mjs","sources":["../../../../source/atomic/animations/brand/chevron-flow.ts"],"sourcesContent":["type TypeAnimationProps = {\n  container: HTMLDivElement;\n  getHeightDiff: () => number;\n  getContainerHeight: () => number;\n  completedCallback?: () => void;\n};\n\ntype TypeArrowProps = TypeAnimationProps & {\n  id: string;\n  wrapperStyleRef?: string;\n};\n\nconst ELEMENT_CONTAINER = 'animation-overlay-container';\nconst ELEMENT_LAYER_OVERLAY_CONTAINER = 'animation-overlay-layer-container';\nconst ELEMENT_LAYER_RED_ARROW_CONTAINER =\n  'animation-overlay-layer-red-arrow-container';\nconst ELEMENT_LAYER_BLACK_ARROW_CONTAINER =\n  'animation-overlay-layer-black-arrow-container';\nconst ELEMENT_GENERIC_ARROW = 'aninmation-arrow';\n\nconst ID_OVERLAY_LEFT = 'animation-overlay-left';\nconst ID_OVERLAY_RIGHT = 'animation-overlay-right';\nconst ID_SLIDE_IN_RED = 'slide-in-red-arrow';\nconst ID_ARROW_BEHIND_OVERLAY = 'animation-overlay-arrow';\nconst ID_ARROW_BEHIND_FOLLOWING = 'animation-following-arrow';\nconst ID_ARROW_BEHIND_FOLLOWING_TWO = 'animation-following-arrow-two';\n\nconst TIMING_ANIMATION_ARROW_FIRST_TIME_IN = 1200;\nconst TIMING_ANIMATION_ARROW_FIRST_TIME_OUT = 4500;\n\nconst FollowingArrowStyles = `\n  .${ELEMENT_LAYER_BLACK_ARROW_CONTAINER} {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translate(-140%, -50%);\n    height: 100%;\n    z-index: 99;\n  }\n\n  .${ELEMENT_LAYER_BLACK_ARROW_CONTAINER} path {\n    fill: #000;\n  }\n\n  #${ID_ARROW_BEHIND_FOLLOWING} {\n    transform: translateX(-90%);\n  }\n`;\n\nconst MainArrowStyles = `\n  .${ELEMENT_LAYER_RED_ARROW_CONTAINER} {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translate(-100%, -50%);\n    z-index: 999;\n    display: flex;\n    align-items: center;\n  }\n\n  .${ELEMENT_GENERIC_ARROW} {\n    height: 100%;\n  }\n`;\n\nconst OverlayStyles = `\n  .${ELEMENT_LAYER_OVERLAY_CONTAINER} {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: auto;\n    height: auto;\n    min-width: 100%;\n    min-height: 100%;\n    z-index: 9;\n    display: flex;\n  }\n\n  #${ID_OVERLAY_RIGHT} {\n    width: 50%;\n  }\n\n  #${ID_OVERLAY_LEFT} {\n    width: 50%;\n  }\n\n  #${ID_ARROW_BEHIND_OVERLAY} {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translate(-60%, -50%);\n    height: 100%;\n    z-index: 9;\n    fill: #000;\n  }\n\n  #${ID_ARROW_BEHIND_OVERLAY} path {\n    fill: #000;\n  }\n`;\n\nconst STYLES_ANIMATION_BRAND_OVERLAY_ELEMENT = `\n  ${OverlayStyles}\n  ${MainArrowStyles}\n  ${FollowingArrowStyles}\n\n  @media (prefers-reduced-motion: reduce) {\n    .${ELEMENT_CONTAINER} svg {\n      display: none;\n    }\n  }\n`;\n\nconst CreateAnimatioOverlayContainer = (props: TypeAnimationProps) => {\n  const { container } = props;\n  const wrapper = document.createElement('div');\n  const SVG_OVERLAY_LEFT = `<svg id=\"${ID_OVERLAY_LEFT}\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"60 0 857.57 976\"><defs><style>.overlay-left{fill:#000;fill-rule:evenodd;stroke-width:0px;}</style></defs><path class=\"overlay-left\" d=\"M492.28,0H0v976h503.46l414.11-481.49L492.28,0Z\"/></svg>`;\n  const SVG_OVERLAY_RIGHT = `<svg id=\"${ID_OVERLAY_RIGHT}\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 690.15 976\"><defs><style>.overlay-right{fill:#000;fill-rule:evenodd;stroke-width:0px;}</style></defs><path class=\"overlay-right\" d=\"M11.18,976l414.11-481.49L0,0h690.15v976H11.18Z\"/></svg>`;\n\n  wrapper.classList.add(ELEMENT_LAYER_OVERLAY_CONTAINER);\n  wrapper.innerHTML = `${SVG_OVERLAY_LEFT} ${SVG_OVERLAY_RIGHT}`;\n  container.appendChild(wrapper);\n  return wrapper;\n};\n\nconst CreateAnimationArrowContainer = (props: TypeArrowProps) => {\n  const { container, id, wrapperStyleRef } = props;\n  const wrapper = document.createElement('div');\n\n  const SVG_ANIMATION_ARROW = `<svg id=\"${id}\" class=\"${ELEMENT_GENERIC_ARROW}\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 973.01 976\"><defs><style>.arrow-video{fill:#e21833;fill-rule:evenodd;}</style></defs><path class=\"arrow-video\" d=\"m427.44,497.01L0,0h545.57l427.44,497.01-411.96,478.99H15.48l411.96-478.99Z\"/></svg>`;\n\n  if (wrapperStyleRef) {\n    wrapper.classList.add(wrapperStyleRef);\n  }\n\n  wrapper.innerHTML = `${SVG_ANIMATION_ARROW}`;\n\n  container.appendChild(wrapper);\n\n  return wrapper;\n};\n\nconst SizeElements = {\n  Arrow: ({ arrow, height }: { arrow: HTMLDivElement; height: number }) => {\n    arrow.style.height = `${height}px`;\n  },\n  Arrows: (props: TypeAnimationProps) => {\n    const { container, getContainerHeight } = props;\n    const height = getContainerHeight();\n\n    const ArrowContainers = Array.from(\n      container.querySelectorAll(`.${ELEMENT_GENERIC_ARROW}`),\n    ) as HTMLDivElement[];\n\n    ArrowContainers.forEach((arrow) => SizeElements.Arrow({ arrow, height }));\n  },\n  All: (props: TypeAnimationProps) => {\n    SizeElements.Arrows(props);\n  },\n};\n\nconst AnimateFollowingArrows = (props: TypeAnimationProps) => {\n  const { container } = props;\n  const arrow = container.querySelector(\n    `#${ID_ARROW_BEHIND_FOLLOWING}`,\n  ) as HTMLDivElement;\n  const arrowTwo = container.querySelector(\n    `#${ID_ARROW_BEHIND_FOLLOWING_TWO}`,\n  ) as HTMLDivElement;\n\n  setTimeout(() => {\n    arrow.style.transition = `transform ${\n      TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 2400\n    }ms ease-in-out`;\n    arrow.style.transform = `translateX(200vw)`;\n  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN + 120);\n\n  setTimeout(() => {\n    arrowTwo.style.transition = `transform ${\n      TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 2800\n    }ms ease-in-out`;\n    arrowTwo.style.transform = `translateX(200vw)`;\n  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN + 200);\n};\n\nconst AnimateMainArrow = (props: TypeAnimationProps) => {\n  const { container, getContainerHeight, getHeightDiff } = props;\n  const arrow = container.querySelector(\n    `#${ID_SLIDE_IN_RED}`,\n  ) as HTMLDivElement;\n  const height = getContainerHeight();\n  const overlayLeft = container.querySelector(\n    `#${ID_OVERLAY_LEFT}`,\n  ) as SVGElement;\n  const overlayPosition = overlayLeft.getBoundingClientRect();\n  const arrowPosition = arrow.getBoundingClientRect();\n  const diff = getHeightDiff();\n  const alignment =\n    overlayPosition.width / 2 +\n    Math.abs(arrowPosition.left) +\n    diff -\n    Math.abs(overlayPosition.left);\n\n  SizeElements.Arrow({ arrow, height });\n  arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_IN}ms ease-in-out`;\n  arrow.style.transform = `translateX(${alignment}px)`;\n\n  setTimeout(() => {\n    arrow.style.transition = `transform ${TIMING_ANIMATION_ARROW_FIRST_TIME_OUT}ms ease-in-out`;\n    arrow.style.transform = `translateX(${alignment * 3}px)`;\n  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN);\n};\n\nconst AnimateOverlay = (props: TypeAnimationProps) => {\n  const { container, completedCallback } = props;\n  const partOne = container.querySelector(`#${ID_OVERLAY_LEFT}`) as SVGElement;\n  const partTwo = container.querySelector(`#${ID_OVERLAY_RIGHT}`) as SVGElement;\n  const partThree = container.querySelector(\n    `#${ID_ARROW_BEHIND_OVERLAY}`,\n  ) as SVGElement;\n  const endPosition = window.innerWidth * 2;\n  const FIRST_ELEMENT_TIME_OUT = 3500;\n  const SYNC_TIME =\n    TIMING_ANIMATION_ARROW_FIRST_TIME_IN + FIRST_ELEMENT_TIME_OUT - 3000;\n  const completedTiming = TIMING_ANIMATION_ARROW_FIRST_TIME_OUT - 3600;\n\n  setTimeout(() => {\n    partTwo.style.transition = `transform ${FIRST_ELEMENT_TIME_OUT}ms ease-in-out`;\n    partTwo.style.transform = `translateX(${endPosition}px`;\n  }, TIMING_ANIMATION_ARROW_FIRST_TIME_IN - 200);\n\n  setTimeout(() => {\n    partOne.style.transition = `transform ${completedTiming}ms ease-in-out`;\n    partOne.style.transform = `translateX(${endPosition}px`;\n  }, SYNC_TIME + 100);\n\n  setTimeout(() => {\n    partThree.style.transition = `transform ${completedTiming}ms ease-in-out`;\n    partThree.style.transform = `translate(${endPosition}px, -50%)`;\n  }, SYNC_TIME + 50);\n\n  if (completedCallback) {\n    setTimeout(() => completedCallback(), SYNC_TIME);\n  }\n};\n\nconst AnimationSequence = (props: TypeAnimationProps) => {\n  AnimateOverlay(props);\n  AnimateMainArrow(props);\n  AnimateFollowingArrows(props);\n};\n\nexport default ({\n  sizedContainer,\n  completedCallback,\n  isAnimationOnLoad = true,\n}: {\n  sizedContainer: HTMLElement;\n  sizedWrapper: HTMLElement;\n  completedCallback?: () => void;\n  isAnimationOnLoad?: boolean;\n}) =>\n  (() => {\n    const container = document.createElement('div');\n    let windowWidth = window.innerWidth;\n    let styles = STYLES_ANIMATION_BRAND_OVERLAY_ELEMENT;\n\n    const getContainerHeight = () => sizedContainer.offsetHeight;\n    const getHeightDiff = () => {\n      return sizedContainer.offsetHeight;\n    };\n    const data = {\n      container: container,\n      getHeightDiff,\n      getContainerHeight,\n      completedCallback,\n    };\n    const overlay = CreateAnimatioOverlayContainer(data);\n    const overlayArrow = CreateAnimationArrowContainer({\n      ...data,\n      id: ID_ARROW_BEHIND_OVERLAY,\n    });\n    const slideInArrow = CreateAnimationArrowContainer({\n      ...data,\n      id: ID_SLIDE_IN_RED,\n      wrapperStyleRef: ELEMENT_LAYER_RED_ARROW_CONTAINER,\n    });\n    const slideInArrowBlackOne = CreateAnimationArrowContainer({\n      ...data,\n      id: ID_ARROW_BEHIND_FOLLOWING,\n      wrapperStyleRef: ELEMENT_LAYER_BLACK_ARROW_CONTAINER,\n    });\n    const slideInArrowBlackTwo = CreateAnimationArrowContainer({\n      ...data,\n      id: ID_ARROW_BEHIND_FOLLOWING_TWO,\n      wrapperStyleRef: ELEMENT_LAYER_BLACK_ARROW_CONTAINER,\n    });\n    const EventLoad = () => {\n      if (isAnimationOnLoad) {\n        AnimationSequence(data);\n        return;\n      }\n\n      const scrollEvent = () => {\n        const containerPosition = container.getBoundingClientRect();\n        const top = containerPosition.top;\n\n        if (top < window.innerHeight && window.scrollY !== 0) {\n          AnimationSequence(data);\n          window.removeEventListener('scroll', scrollEvent);\n        }\n      };\n\n      window.addEventListener('scroll', scrollEvent);\n    };\n    const EventResize = () => {\n      if (windowWidth !== window.innerWidth) {\n        window.removeEventListener('resize', EventResize);\n        container.remove();\n      }\n    };\n\n    container.classList.add(ELEMENT_CONTAINER);\n    container.appendChild(overlay);\n    container.appendChild(overlayArrow);\n    container.appendChild(slideInArrow);\n    container.appendChild(slideInArrowBlackOne);\n    container.appendChild(slideInArrowBlackTwo);\n\n    window.addEventListener('resize', EventResize);\n\n    return {\n      element: container,\n      styles,\n      events: {\n        load: EventLoad,\n      },\n    };\n  })();\n"],"names":[],"mappings":"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"}

package/dist/atomic/animations/brand/chevron-scroll.js

@@ -0,0 +1,168 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const ICON_CHEVRON_BIG = `<svg width="252" height="306" aria-hidden="true" viewBox="0 0 252 306" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z" /></svg>`;
+const ICON_CHEVRON_SMALL = `<svg width="144" height="202" aria-hidden="true"  viewBox="0 0 144 202" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z" /></svg>`;
+const ELEMENT_ANIMATION_BRAND_LOGO = "brand-logo-container";
+const ELEMENT_FIRST_CHEVRON = "brand-logo-first-chevron";
+const ELEMENT_SECOND_CHEVRON = "brand-logo-second-chevron";
+const ELEMENT_THIRD_CHEVRON = "brand-logo-third-chevron";
+const FirstChevronStyles = `
+  @keyframes chevron-one {
+    from { transform: translateX(-80%); }
+    to { transform: translateX(40%); }
+  }
+
+  .${ELEMENT_FIRST_CHEVRON} {
+    top: 0;
+    transform: translateX(-80%);
+  }
+
+  .${ELEMENT_FIRST_CHEVRON} svg {
+    fill: ${Styles.token.color.gold};
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_FIRST_CHEVRON} {
+        transform: translateX(40%);
+        animation: chevron-one forwards;
+        animation-timeline: view();
+        animation-range-start: cover;
+        animation-range-end: contain;
+      }
+    }
+  }
+`;
+const SecondChevronStyles = `
+  @keyframes chevron-two {
+    from { transform: translateX(-40%); }
+    to { transform: translateX(24%); }
+  }
+
+  .${ELEMENT_SECOND_CHEVRON} {
+    top: 10%;
+    z-index: 99;
+    transform: translateX(-40%);
+  }
+
+  @media (${Styles.token.media.queries.highDef.min}) {
+    .${ELEMENT_SECOND_CHEVRON} {
+       top: 95px;
+    }
+  }
+
+  .${ELEMENT_SECOND_CHEVRON} svg {
+    fill: ${Styles.token.color.red};
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_SECOND_CHEVRON} {
+        transform: translateX(24%);
+        animation: chevron-two forwards;
+        animation-timeline: view();
+        animation-range-start: cover;
+       animation-range-end: contain;
+      }
+    }
+  }
+`;
+const ThirdChevronStyles = `
+  @keyframes chevron-three {
+    from { transform: translateX(-30%); }
+    to { transform: translateX(60%); }
+  }
+
+  .${ELEMENT_THIRD_CHEVRON} {
+    top: 25%;
+    transform: translateX(-30%);
+  }
+
+  @media (${Styles.token.media.queries.highDef.min}) {
+    .${ELEMENT_THIRD_CHEVRON} {
+       top: 195px;
+    }
+  }
+
+  .${ELEMENT_THIRD_CHEVRON} svg {
+    fill: ${Styles.token.color.black};
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_THIRD_CHEVRON} {
+        transform: translateX(60%);
+        animation: chevron-three forwards;
+        animation-timeline: view();
+        animation-range-start: 0;
+        animation-range-end: 100vh;
+      }
+    }
+  }
+`;
+const STYLES_ANIMATION_BRAND_LOGO = `
+  .${ELEMENT_ANIMATION_BRAND_LOGO} {
+    position: relative;
+    height: 50vw;
+    width: 100vw;
+  }
+
+  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {
+    position: absolute;
+    height: 100%;
+    right: 0;
+    transform: none;
+  }
+
+  .${ELEMENT_SECOND_CHEVRON} svg,
+  .${ELEMENT_THIRD_CHEVRON} svg {
+    height: 10vw;
+    width: 8.2vw;
+  }
+
+  @media (${Styles.token.media.queries.highDef.min}) {
+    .${ELEMENT_SECOND_CHEVRON} svg,
+    .${ELEMENT_THIRD_CHEVRON} svg {
+      height: 306px;
+      width: 252px;
+    }
+  }
+
+  .${FirstChevronStyles} svg {
+    height: 7vw;
+    width: 5vw;
+  }
+
+  @media (${Styles.token.media.queries.highDef.min}) {
+    .${FirstChevronStyles} svg {
+      height: 202px;
+      width: 144px;
+    }
+  }
+
+  ${FirstChevronStyles} 
+  ${SecondChevronStyles} 
+  ${ThirdChevronStyles} 
+`;
+const chevronScroll = () => (() => {
+  const container = document.createElement("div");
+  const first = document.createElement("div");
+  const second = document.createElement("div");
+  const third = document.createElement("div");
+  first.classList.add(ELEMENT_FIRST_CHEVRON);
+  first.innerHTML = ICON_CHEVRON_SMALL;
+  second.classList.add(ELEMENT_SECOND_CHEVRON);
+  second.innerHTML = ICON_CHEVRON_BIG;
+  third.classList.add(ELEMENT_THIRD_CHEVRON);
+  third.innerHTML = ICON_CHEVRON_BIG;
+  container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);
+  container.appendChild(first);
+  container.appendChild(second);
+  container.appendChild(third);
+  return {
+    element: container,
+    styles: STYLES_ANIMATION_BRAND_LOGO
+  };
+})();
+module.exports = chevronScroll;
+//# sourceMappingURL=chevron-scroll.js.map

package/dist/atomic/animations/brand/chevron-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-scroll.js","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\"  viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst ELEMENT_ANIMATION_BRAND_LOGO = 'brand-logo-container';\nconst ELEMENT_FIRST_CHEVRON = 'brand-logo-first-chevron';\nconst ELEMENT_SECOND_CHEVRON = 'brand-logo-second-chevron';\nconst ELEMENT_THIRD_CHEVRON = 'brand-logo-third-chevron';\n\nconst FirstChevronStyles = `\n  @keyframes chevron-one {\n    from { transform: translateX(-80%); }\n    to { transform: translateX(40%); }\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} {\n    top: 0;\n    transform: translateX(-80%);\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} svg {\n    fill: ${token.color.gold};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_FIRST_CHEVRON} {\n        transform: translateX(40%);\n        animation: chevron-one forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst SecondChevronStyles = `\n  @keyframes chevron-two {\n    from { transform: translateX(-40%); }\n    to { transform: translateX(24%); }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} {\n    top: 10%;\n    z-index: 99;\n    transform: translateX(-40%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} {\n       top: 95px;\n    }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg {\n    fill: ${token.color.red};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_SECOND_CHEVRON} {\n        transform: translateX(24%);\n        animation: chevron-two forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n       animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst ThirdChevronStyles = `\n  @keyframes chevron-three {\n    from { transform: translateX(-30%); }\n    to { transform: translateX(60%); }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} {\n    top: 25%;\n    transform: translateX(-30%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_THIRD_CHEVRON} {\n       top: 195px;\n    }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    fill: ${token.color.black};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_THIRD_CHEVRON} {\n        transform: translateX(60%);\n        animation: chevron-three forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\nconst STYLES_ANIMATION_BRAND_LOGO = `\n  .${ELEMENT_ANIMATION_BRAND_LOGO} {\n    position: relative;\n    height: 50vw;\n    width: 100vw;\n  }\n\n  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {\n    position: absolute;\n    height: 100%;\n    right: 0;\n    transform: none;\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg,\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    height: 10vw;\n    width: 8.2vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} svg,\n    .${ELEMENT_THIRD_CHEVRON} svg {\n      height: 306px;\n      width: 252px;\n    }\n  }\n\n  .${FirstChevronStyles} svg {\n    height: 7vw;\n    width: 5vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${FirstChevronStyles} svg {\n      height: 202px;\n      width: 144px;\n    }\n  }\n\n  ${FirstChevronStyles} \n  ${SecondChevronStyles} \n  ${ThirdChevronStyles} \n`;\n\nexport default () =>\n  (() => {\n    const container = document.createElement('div');\n    const first = document.createElement('div');\n    const second = document.createElement('div');\n    const third = document.createElement('div');\n\n    first.classList.add(ELEMENT_FIRST_CHEVRON);\n    first.innerHTML = ICON_CHEVRON_SMALL;\n\n    second.classList.add(ELEMENT_SECOND_CHEVRON);\n    second.innerHTML = ICON_CHEVRON_BIG;\n\n    third.classList.add(ELEMENT_THIRD_CHEVRON);\n    third.innerHTML = ICON_CHEVRON_BIG;\n\n    container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);\n    container.appendChild(first);\n    container.appendChild(second);\n    container.appendChild(third);\n\n    return {\n      element: container,\n      styles: STYLES_ANIMATION_BRAND_LOGO,\n    };\n  })();\n"],"names":["token"],"mappings":";;AAEA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,+BAA+B;AACrC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAE9B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,qBAAqB;AAAA,YACdA,OAAAA,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMfA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACfA,OAAAA,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKdA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACdA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,8BAA8B;AAAA,KAC/B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO5B,sBAAsB;AAAA,KACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKdA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKXA,OAAAA,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,SAAO,UAAU,IAAI,sBAAsB;AAC3C,SAAO,YAAY;AAEnB,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,KAAK;AAC3B,YAAU,YAAY,MAAM;AAC5B,YAAU,YAAY,KAAK;AAE3B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;;"}

package/dist/atomic/animations/brand/chevron-scroll.mjs

@@ -0,0 +1,169 @@
+import { token } from "@universityofmaryland/web-styles-library";
+const ICON_CHEVRON_BIG = `<svg width="252" height="306" aria-hidden="true" viewBox="0 0 252 306" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z" /></svg>`;
+const ICON_CHEVRON_SMALL = `<svg width="144" height="202" aria-hidden="true"  viewBox="0 0 144 202" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z" /></svg>`;
+const ELEMENT_ANIMATION_BRAND_LOGO = "brand-logo-container";
+const ELEMENT_FIRST_CHEVRON = "brand-logo-first-chevron";
+const ELEMENT_SECOND_CHEVRON = "brand-logo-second-chevron";
+const ELEMENT_THIRD_CHEVRON = "brand-logo-third-chevron";
+const FirstChevronStyles = `
+  @keyframes chevron-one {
+    from { transform: translateX(-80%); }
+    to { transform: translateX(40%); }
+  }
+
+  .${ELEMENT_FIRST_CHEVRON} {
+    top: 0;
+    transform: translateX(-80%);
+  }
+
+  .${ELEMENT_FIRST_CHEVRON} svg {
+    fill: ${token.color.gold};
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_FIRST_CHEVRON} {
+        transform: translateX(40%);
+        animation: chevron-one forwards;
+        animation-timeline: view();
+        animation-range-start: cover;
+        animation-range-end: contain;
+      }
+    }
+  }
+`;
+const SecondChevronStyles = `
+  @keyframes chevron-two {
+    from { transform: translateX(-40%); }
+    to { transform: translateX(24%); }
+  }
+
+  .${ELEMENT_SECOND_CHEVRON} {
+    top: 10%;
+    z-index: 99;
+    transform: translateX(-40%);
+  }
+
+  @media (${token.media.queries.highDef.min}) {
+    .${ELEMENT_SECOND_CHEVRON} {
+       top: 95px;
+    }
+  }
+
+  .${ELEMENT_SECOND_CHEVRON} svg {
+    fill: ${token.color.red};
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_SECOND_CHEVRON} {
+        transform: translateX(24%);
+        animation: chevron-two forwards;
+        animation-timeline: view();
+        animation-range-start: cover;
+       animation-range-end: contain;
+      }
+    }
+  }
+`;
+const ThirdChevronStyles = `
+  @keyframes chevron-three {
+    from { transform: translateX(-30%); }
+    to { transform: translateX(60%); }
+  }
+
+  .${ELEMENT_THIRD_CHEVRON} {
+    top: 25%;
+    transform: translateX(-30%);
+  }
+
+  @media (${token.media.queries.highDef.min}) {
+    .${ELEMENT_THIRD_CHEVRON} {
+       top: 195px;
+    }
+  }
+
+  .${ELEMENT_THIRD_CHEVRON} svg {
+    fill: ${token.color.black};
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${ELEMENT_THIRD_CHEVRON} {
+        transform: translateX(60%);
+        animation: chevron-three forwards;
+        animation-timeline: view();
+        animation-range-start: 0;
+        animation-range-end: 100vh;
+      }
+    }
+  }
+`;
+const STYLES_ANIMATION_BRAND_LOGO = `
+  .${ELEMENT_ANIMATION_BRAND_LOGO} {
+    position: relative;
+    height: 50vw;
+    width: 100vw;
+  }
+
+  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {
+    position: absolute;
+    height: 100%;
+    right: 0;
+    transform: none;
+  }
+
+  .${ELEMENT_SECOND_CHEVRON} svg,
+  .${ELEMENT_THIRD_CHEVRON} svg {
+    height: 10vw;
+    width: 8.2vw;
+  }
+
+  @media (${token.media.queries.highDef.min}) {
+    .${ELEMENT_SECOND_CHEVRON} svg,
+    .${ELEMENT_THIRD_CHEVRON} svg {
+      height: 306px;
+      width: 252px;
+    }
+  }
+
+  .${FirstChevronStyles} svg {
+    height: 7vw;
+    width: 5vw;
+  }
+
+  @media (${token.media.queries.highDef.min}) {
+    .${FirstChevronStyles} svg {
+      height: 202px;
+      width: 144px;
+    }
+  }
+
+  ${FirstChevronStyles} 
+  ${SecondChevronStyles} 
+  ${ThirdChevronStyles} 
+`;
+const chevronScroll = () => (() => {
+  const container = document.createElement("div");
+  const first = document.createElement("div");
+  const second = document.createElement("div");
+  const third = document.createElement("div");
+  first.classList.add(ELEMENT_FIRST_CHEVRON);
+  first.innerHTML = ICON_CHEVRON_SMALL;
+  second.classList.add(ELEMENT_SECOND_CHEVRON);
+  second.innerHTML = ICON_CHEVRON_BIG;
+  third.classList.add(ELEMENT_THIRD_CHEVRON);
+  third.innerHTML = ICON_CHEVRON_BIG;
+  container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);
+  container.appendChild(first);
+  container.appendChild(second);
+  container.appendChild(third);
+  return {
+    element: container,
+    styles: STYLES_ANIMATION_BRAND_LOGO
+  };
+})();
+export {
+  chevronScroll as default
+};
+//# sourceMappingURL=chevron-scroll.mjs.map

package/dist/atomic/animations/brand/chevron-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-scroll.mjs","sources":["../../../../source/atomic/animations/brand/chevron-scroll.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\n\nconst ICON_CHEVRON_BIG = `<svg width=\"252\" height=\"306\" aria-hidden=\"true\" viewBox=\"0 0 252 306\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M126 0H0L126 152.706L0 305.411H126L252 152.706L126 0Z\" /></svg>`;\nconst ICON_CHEVRON_SMALL = `<svg width=\"144\" height=\"202\" aria-hidden=\"true\"  viewBox=\"0 0 144 202\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M60.3972 0H0L83.6028 100.765L0 201.529H60.3972L144 100.765L60.3972 0Z\" /></svg>`;\n\nconst ELEMENT_ANIMATION_BRAND_LOGO = 'brand-logo-container';\nconst ELEMENT_FIRST_CHEVRON = 'brand-logo-first-chevron';\nconst ELEMENT_SECOND_CHEVRON = 'brand-logo-second-chevron';\nconst ELEMENT_THIRD_CHEVRON = 'brand-logo-third-chevron';\n\nconst FirstChevronStyles = `\n  @keyframes chevron-one {\n    from { transform: translateX(-80%); }\n    to { transform: translateX(40%); }\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} {\n    top: 0;\n    transform: translateX(-80%);\n  }\n\n  .${ELEMENT_FIRST_CHEVRON} svg {\n    fill: ${token.color.gold};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_FIRST_CHEVRON} {\n        transform: translateX(40%);\n        animation: chevron-one forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n        animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst SecondChevronStyles = `\n  @keyframes chevron-two {\n    from { transform: translateX(-40%); }\n    to { transform: translateX(24%); }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} {\n    top: 10%;\n    z-index: 99;\n    transform: translateX(-40%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} {\n       top: 95px;\n    }\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg {\n    fill: ${token.color.red};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_SECOND_CHEVRON} {\n        transform: translateX(24%);\n        animation: chevron-two forwards;\n        animation-timeline: view();\n        animation-range-start: cover;\n       animation-range-end: contain;\n      }\n    }\n  }\n`;\n\nconst ThirdChevronStyles = `\n  @keyframes chevron-three {\n    from { transform: translateX(-30%); }\n    to { transform: translateX(60%); }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} {\n    top: 25%;\n    transform: translateX(-30%);\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_THIRD_CHEVRON} {\n       top: 195px;\n    }\n  }\n\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    fill: ${token.color.black};\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: view()) {\n      .${ELEMENT_THIRD_CHEVRON} {\n        transform: translateX(60%);\n        animation: chevron-three forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n      }\n    }\n  }\n`;\n\nconst STYLES_ANIMATION_BRAND_LOGO = `\n  .${ELEMENT_ANIMATION_BRAND_LOGO} {\n    position: relative;\n    height: 50vw;\n    width: 100vw;\n  }\n\n  .${ELEMENT_ANIMATION_BRAND_LOGO} > * {\n    position: absolute;\n    height: 100%;\n    right: 0;\n    transform: none;\n  }\n\n  .${ELEMENT_SECOND_CHEVRON} svg,\n  .${ELEMENT_THIRD_CHEVRON} svg {\n    height: 10vw;\n    width: 8.2vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${ELEMENT_SECOND_CHEVRON} svg,\n    .${ELEMENT_THIRD_CHEVRON} svg {\n      height: 306px;\n      width: 252px;\n    }\n  }\n\n  .${FirstChevronStyles} svg {\n    height: 7vw;\n    width: 5vw;\n  }\n\n  @media (${token.media.queries.highDef.min}) {\n    .${FirstChevronStyles} svg {\n      height: 202px;\n      width: 144px;\n    }\n  }\n\n  ${FirstChevronStyles} \n  ${SecondChevronStyles} \n  ${ThirdChevronStyles} \n`;\n\nexport default () =>\n  (() => {\n    const container = document.createElement('div');\n    const first = document.createElement('div');\n    const second = document.createElement('div');\n    const third = document.createElement('div');\n\n    first.classList.add(ELEMENT_FIRST_CHEVRON);\n    first.innerHTML = ICON_CHEVRON_SMALL;\n\n    second.classList.add(ELEMENT_SECOND_CHEVRON);\n    second.innerHTML = ICON_CHEVRON_BIG;\n\n    third.classList.add(ELEMENT_THIRD_CHEVRON);\n    third.innerHTML = ICON_CHEVRON_BIG;\n\n    container.classList.add(ELEMENT_ANIMATION_BRAND_LOGO);\n    container.appendChild(first);\n    container.appendChild(second);\n    container.appendChild(third);\n\n    return {\n      element: container,\n      styles: STYLES_ANIMATION_BRAND_LOGO,\n    };\n  })();\n"],"names":[],"mappings":";AAEA,MAAM,mBAAmB;AACzB,MAAM,qBAAqB;AAE3B,MAAM,+BAA+B;AACrC,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAE9B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKrB,qBAAqB;AAAA,YACd,MAAM,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,SAKnB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMf,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKxB,sBAAsB;AAAA,YACf,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW/B,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,KAKvB,qBAAqB;AAAA,YACd,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAKpB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW9B,MAAM,8BAA8B;AAAA,KAC/B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAM5B,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAO5B,sBAAsB;AAAA,KACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKd,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,sBAAsB;AAAA,OACtB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMvB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,MAAM,MAAM,QAAQ,QAAQ,GAAG;AAAA,OACpC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAA,gBAAe,OACZ,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,SAAO,UAAU,IAAI,sBAAsB;AAC3C,SAAO,YAAY;AAEnB,QAAM,UAAU,IAAI,qBAAqB;AACzC,QAAM,YAAY;AAElB,YAAU,UAAU,IAAI,4BAA4B;AACpD,YAAU,YAAY,KAAK;AAC3B,YAAU,YAAY,MAAM;AAC5B,YAAU,YAAY,KAAK;AAE3B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAEZ,GAAA;"}