Jump to main content

Animations

A few, commonly used animations are included in hgrid.

File location: sass/animation/_*.scss (multiple partials) (GitHub)

You can exclude individual animations from the CSS output by changing their Sass variables with the @use rule. Example: $include-spinner: false. See the full list of variables on GitHub.

Donut Spinner

It comes in four sizes. .small, .large, .xl and the default.

<div class="donut-spinner small"></div>
<div class="donut-spinner"></div>
<div class="donut-spinner large"></div>
<div class="donut-spinner xl"></div>

Out of the box, the donut glaze picks up the primary theme color you set when customizing hgrid. Add .inline-block or use flex if you want to place it next to another element.

Rotate

Rotate any element once (on pageload) with .rotate-once. Default rotation speed is 0.8s. Refresh page for demo.

Sale!
<h5 class="rotate-once max-content text-red">Sale!</h5>

We use the max-content utility to reduce the size of the wide h5 element to the width of the text. Otherwise the center of the rotation would be at the center of the wide element instead of at the center of the text.

Rotate any element indefinitely with .rotate. Default speed is 60 rotations per minute.

rotating hgrid icon
<img class="rotate" src="/assets/img/icon.png" alt="rotating icon">

Transition

Applying the CSS class .transition to an HTML element creates an overlay that covers the entire viewport. With JavaScript, hide this overlay by applying .vanish when the page has finished loading.

Place the overlay and its script right after the opening body tag:

<body>

  <div class="transition"></div>

  <!-- Add '.vanish' when the page content has loaded: -->
  <script type="text/javascript">
    window.addEventListener('load', () => {
      document.querySelector('.transition').classList.add('vanish')
    })
  </script>

  <!-- page content comes here -->

</body>

The effect can be seen by refreshing this page.

Flashing Element

Add the class .flash to any HTML element to animate it.

!
<!-- Flashing outer element -->
<div class="blinker f-center flash">
  <div class="inner"></div>
</div>

<!-- Flashing inner element -->
<div class="blinker f-center">
  <div class="inner flash"></div>
</div>

<!-- Pulsating rings -->
<div class="pulse-ring f-center flash">
  <div class="inner flash"></div>
</div>

<!-- Flashing triangle -->
<div class="triangle f-center flash">
  <div class="inner f-center">
    <span>!</span>
  </div>
</div>
// These examples are not part of hgrid.

.blinker {
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid #ff5f5f;
  border-radius: 100%;

  .inner {
    width: 1rem;
    height: 1rem;
    background: red;
    border-radius: 100%;
  }
}

.pulse-ring {
  background: #98d1ff;
  border-radius: 100%;
  padding: 0.8rem;

  .inner {
    width: 1rem;
    height: 1rem;
    background: #42aaff;
    border-radius: 100%;
  }
}

.triangle {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 3.2rem solid #ff0000;
  position: relative;

  .inner {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid #fff;
    top: 18px;
    position: relative;

    span {
      position: relative;
      top: 11px;
      font-weight: bold;
      font-size: 17px;
      right: -0.2px;
    }
  }
}

Fade

Fade elements in and out from a hidden state.

<div class="bg-gray-darker radius-6 hide fade">
  <span class="x-close text-white fr pointer">×</span>
  <p class="text-center text-white padding-20">I'm fading in and out</p>
</div>
×

I'm fading in and out

The element to be faded in and out requires the .fade class and is invisible with opacity: 0; by default. If you prefer to remove it entirely from the document, add .hide.

Manipulate .fade-in and .fade-out (and optionally .hide) with a JavaScript snippet, for example like this:

(() => {
  const fadeTrigger = document.querySelector('.demo-fade-trigger')
  const fadeElem = document.querySelector('.fade')
  const x = document.querySelector('.x-close')

  if (!fadeTrigger || !fadeElem || !x) return

  fadeTrigger.addEventListener('click', () => {
    fadeElem.classList.add('fade-in')
    fadeElem.classList.remove('fade-out')
    fadeElem.classList.remove('hide')
  })

  x.addEventListener('click', () => {
    fadeElem.classList.remove('fade-in')
    fadeElem.classList.add('fade-out')

    setTimeout(() => {
      fadeElem.classList.add('hide')
    }, 400)

  // Keyboard event omitted for brevity

  })
})();

Scroll

This "animation" depends on browser implementation of the CSS spec. It's typically used as <body class="scroll-smooth"> and controls the scroll method between anchor links. Available variations:

.scroll-auto { /* CSS default */
  scroll-behavior: auto;
}

.scroll-inherit {
  scroll-behavior: inherit;
}

.scroll-smooth { /* hgrid default in _base.scss */
  scroll-behavior: smooth;
}

.scroll-unset {
  scroll-behavior: unset;
}

Previous: Typography

Next: Accessibility