Animate

On Expand

These utilities animate when the element or its immediate parent has its aria-expanded attribute set to true. It works well with the Collapse pattern.

  • u-rotateOnExpand180: Rotate 180 degrees
  • u-rotateOnExpand45: Rotate 45 degrees

Toggle Link

Toggle Link

Spin

Causes an element to spin forever. Useful to indicate loading states.

<svg width="28" height="28" viewBox="0 0 28 28" role="presentation" class="Icon Icon--block u-flexExpandSides u-textSize6 u-spin">
  <path d="M27.5 14c0 7.453-6.047 13.5-13.5 13.5s-13.5-6.047-13.5-13.5c0-6.781 5-12.391 11.5-13.359v3.563c-4.562 0.922-8 4.969-8 9.797 0 5.516 4.484 10 10 10s10-4.484 10-10c0-4.828-3.437-8.875-8-9.797v-3.563c6.5 0.969 11.5 6.578 11.5 13.359z" />
</svg>

Fade

You can fade elements in and out using our u-fade utility in conjunction with the transitionHiddenElement method on our global cpeToolkit namespace. For more information about using transitionHiddenElement you can view the module on GitHub

<button class="Button js-example-trigger">
  Toggle Faded Content
</button>

<div class="u-fade js-faded-content u-spaceTop" hidden>
  Peekaboo!
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const fader = cpeToolkit.transitionHiddenElement({
      element: document.querySelector('.js-faded-content'),
      visibleClass: 'is-visible',
    });
    document.querySelector('.js-example-trigger').addEventListener(
      'click', () => {
        fader.toggle();
      }
    );
  });
</script>