Animation Helper Classes

Spinner Animation

TIP

Used in Loading Spinner.

.h-spinner

<i class="fa fa-spinner-third h-spinner"></i>

Fade-In Animation

TIP

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

.h-animate-width

@mixin animateWidth($duration: 100000s) {
  animation: widthAnimation $duration ease-in; // duration can be set via "animation-duration"
  animation-fill-mode: both;
}

Example

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

Toggle Animation

WARNING

TODO: Still in use?

// 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;
  }
}