Animation Helper Classes

Spinner Animation

Used in Loading Spinner.

.h-spinner

Fade-In Animation

TODO: is this still in use? remove if not
Doesn't work without javascript - the class .h-fade-in has to be added when e.g. the DOM element scrolls into view.

.h-fade-in-before {
  opacity: 0;
  transform: translateY(100px);
  transition: all $transition-duration-slow ease-out;
}

.h-fade-in {
  opacity: 1;
  transform: translateY(0);
}

Animate Width Animation

Set the duration of the animation via the attribute animation-duration.
Used in Progress Bar.

.h-animate-width

<div class="c-progress">
    <div class="c-progress__bar -animate" style="animation-duration: 8s"></div>
</div>

Toggle Animation deprecated

TODO: is this still in use? remove if not

// to replace jquery's toggle animation
.toggle-content {
  @include transition(height, $transition-duration ease-in-out);
  display: none;
  height: 0;
  opacity: 0;
  overflow: hidden;

  &.-is-visible {
    display: block;
    height: auto;
    opacity: 1;
  }
}