# elr-scss-animations

> a scss mixin for animations

Latest version **0.0.14** (published 2021-12-13) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install elr-scss-animations
pnpm add elr-scss-animations
yarn add elr-scss-animations
bun add elr-scss-animations
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2021-12-13 |
| First published | 2017-10-29 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Elizabeth Rogers |
| Maintainers | beth_rogers465 |
| Keywords | sass, css, mixins, animations |

## Links

- npm: https://www.npmjs.com/package/elr-scss-animations
- Repository: https://github.com/Beth3346/elr-scss-animations
- Homepage: https://github.com/Beth3346/elr-scss-animations.git
- Issues: https://github.com/Beth3346/elr-scss-animations/issues
- npm.io page: https://npm.io/package/elr-scss-animations

## Dependencies (2)

- [elr-scss-config](https://npm.io/package/elr-scss-config.md) ^1.1.2
- [elr-scss-functions](https://npm.io/package/elr-scss-functions.md) 1.1.6

## Alternatives

- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
- [react-scroll-snap-anime-slider](https://npm.io/package/react-scroll-snap-anime-slider.md) — 214 weekly downloads

## Recent versions

- 0.0.14 (latest) — 2021-12-13
- 0.0.13 — 2021-11-24
- 0.0.12 — 2021-11-14
- 0.0.11 — 2021-11-13
- 0.0.10 — 2021-11-02
- 0.0.9 — 2021-10-30
- 0.0.8 — 2021-10-27
- 0.0.7 — 2021-10-26
- 0.0.6 — 2019-02-16
- 0.0.5 — 2019-02-16
- 0.0.4 — 2019-02-06
- 0.0.3 — 2019-02-05
- 0.0.2 — 2018-05-02
- 0.0.1 — 2017-10-29

## README

# Animations

[![npm version](http://img.shields.io/npm/v/elr-scss-animations.svg)](https://www.npmjs.org/package/elr-scss-animations)
[![CI](https://github.com/Beth3346/elr-scss-animations/actions/workflows/node.js.yml/badge.svg)](https://github.com/Beth3346/elr-scss-animations/actions/workflows/node.js.yml)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm](https://img.shields.io/npm/dm/elr-scss-animations.svg?style=flat)](https://npmjs.com/package/elr-scss-animations)
[![last commit](https://img.shields.io/github/last-commit/Beth3346/elr-scss-animations.svg)](https://github.com/Beth3346/elr-scss-animations)
[![last commit](https://img.shields.io/github/last-commit/Beth3346/elr-scss-animations.svg)](https://github.com/Beth3346/elr-scss-animations)
[![Netlify Status](https://api.netlify.com/api/v1/badges/7ff483a2-267c-4901-9710-5f6a3e1d8186/deploy-status)](https://app.netlify.com/sites/elr-animations/deploys)

- Scss Mixin library for animations

[View Demo](https://elr-animations.netlify.app/)

## Installation

Download node at [nodejs.org](http://nodejs.org) and install it, if you haven't already.

```sh
npm install elr-scss-animations
```

or

```sh
yarn add elr-scss-animations
```

## Usage

### elr-fade

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

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

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

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

```html
<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

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

```html
<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

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

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

```html
<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

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

```html
<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

---
_Source: https://npm.io/package/elr-scss-animations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._