Animations

• Scss Mixin library for animations

View Demo

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-animations

or

yarn add elr-scss-animations

Usage

elr-fade

the elr-fade mixin shows and hides an element on hover.

@import "elr-scss-animations/src/main";

.elr-fade-out {
  @include elr-fade();
}

.elr-fade-in {
  @include elr-fade(
    $config: (
      type: show,
    )
  );
}

<div class="elr-fade-in">
  <div class="elr-fade-item box">
    <p>Now you can see me</p>
  </div>
</div>

<div class="elr-fade-out">
  <div class="elr-fade-item box">
    <p>Now you can see me</p>
  </div>
</div>

elr-spin

.elr-spin-4s {
  @include elr-spin(
    $config: (
      speed: 4s,
    )
  );
}

<div class="circle elr-spin-4s">Spinning Faster!</div>

elr-flipper

• The elr-flipper mixin adds an 'active' class to an element to create a 'flip' effect.
• If the element with class 'elr-flipper-container' has the active class the element with the class of 'elr-flipper-back' is visible.
• You must implement the active class toggle event yourself using JavaScript

@import "elr-scss-animations/src/main";

.elr-flipper {
  @include elr-flipper;
}

<div class="elr-flipper">
  <div class="elr-flipper-container active" role="button" aria-pressed="true">
    <div class="elr-flipper-front">
      <p>Click Here</p>
    </div>
    <div class="elr-flipper-back">
      <p>This is some content</p>
    </div>
  </div>
</div>

elr-slide

• The elr-slide mixin adds an 'active' class to an element to create a 'slide down' effect.
• If the element with class 'elr-slide' has the active class it is visible.
• You must implement the active class toggle event yourself using JavaScript

.elr-slide {
  @include elr-slide;
}

<div>
  <h4>Slide Down</h4>
  <ul class="elr-slide">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
  </ul>
</div>

License

SEE LICENSE IN LICENSE.md