# scranimate

> A simple Javascript + CSS package to animate items into view as the user scrolls them into the viewport.

Latest version **1.0.3** (published 2023-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install scranimate
pnpm add scranimate
yarn add scranimate
bun add scranimate
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-11-03 |
| First published | 2023-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Robert Wade |
| Maintainers | treetop1500 |
| Keywords | scroll, animate |

## Links

- npm: https://www.npmjs.com/package/scranimate
- Repository: https://github.com/treetop1500/scranimate
- Homepage: https://github.com/treetop1500/scranimate#readme
- Issues: https://github.com/treetop1500/scranimate/issues
- npm.io page: https://npm.io/package/scranimate

## 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

- 1.0.3 (latest) — 2023-11-03
- 1.0.0 — 2023-11-03

## README

# Scranimate
A simple Javascript + CSS package to animate items into view as the user scrolls them into the viewport.

## Installation
### With NPM
```bash
npm i scranimate --save
```
### With Yarn
```bash
yarn add scranimate
```
---
## Usage
### Add the Javascript
```javascript
require('[path_to_node_modules]/scranimate/src/js/scranimate.js');
```
### Add the CSS
```css
@import '[path_to_node_modules]/scranimate/src/css/scranimate.css';
```

### Configuring Animated Elements

 In order to have items animate in as they come into view, add two classes:

- `scranimate` 
- `scranimate-right` | `scranimate-left` | `scranimate-down` | `scranimate-up`

The first class `scranimate` initializes the object to be animated.  The second class (choose one from the list above) is the direction in which the object animates.

---

## Example

In the following example the paragraph will animate into the right when it is 50% within the viewport.

```html
<p class="scranimate scranimate-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus elit sit amet ipsum varius sollicitudin. Vivamus lacinia venenatis erat. Nulla consequat turpis et hendrerit tristique. Suspendisse eleifend elit porttitor magna vehicula, in pharetra augue imperdiet. Integer ut tincidunt nunc, vel finibus ligula. Integer eleifend congue augue, sed blandit mauris blandit nec. In ac leo diam. Fusce dictum lectus ac nulla condimentum rhoncus. Suspendisse potenti. Phasellus luctus orci in gravida accumsan. Pellentesque nec sodales nunc.
</p>
```

## Todo

 - Allow configuration of animation specifics such as timing and easing.
 - Allow configuration of viewport percentage that initiates animation.

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