# scrollingsvg

> A react component for SVG animations to begin once the image has been scrolled onto the screen

Latest version **1.0.2** (published 2020-04-11) · ISC license · 0 weekly downloads

## Install

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

## 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.2 |
| Published | 2020-04-11 |
| First published | 2020-04-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ben Graham |
| Maintainers | graham768 |
| Keywords | Scrolling, SVG, Animation, onscroll, css, animate, react |

## Links

- npm: https://www.npmjs.com/package/scrollingsvg
- Repository: https://github.com/graham768/ScrollingSvg
- Homepage: https://github.com/graham768/ScrollingSvg#readme
- Issues: https://github.com/graham768/ScrollingSvg/issues
- npm.io page: https://npm.io/package/scrollingsvg

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.13.1
- [webpack](https://npm.io/package/webpack.md) ^4.42.1

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [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

## Recent versions

- 1.0.2 (latest) — 2020-04-11
- 1.0.1 — 2020-04-11
- 1.0.0 — 2020-04-11

## README

# Scrolling SVG

A React component for SVG animations to begin once the image has been scrolled onto the screen

## Installation

`npm i scrollingsvg`

## Usage

ScrollingSvg is used by creating an svg element child within the tag with an existing animation. The animation is paused until the SVG is in full view.
This module pairs well with [react-svg-loader](https://github.com/boopathi/react-svg-loader/tree/master/packages/react-svg-loader) to save SVGs as separate files.

An SVG `className` can be put on either `ScrollingSvg` or the SVG element. Classes added to `ScrollingSvg` are always applied to the SVG element.

[![Edit ScrollingSvg Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/recursing-mirzakhani-dcjm2?fontsize=14&hidenavigation=1&theme=dark)

index.js
```js
import React from "react"
import ScrollingSvg from "scrollingsvg"
import "./index.css"

export default () => (
    <div>
      <ScrollingSvg>
        <svg className="round" viewBox="0 0 100 100" data-percent="100">
          <circle cx="50" cy="50" r="40" />
        </svg>
      </ScrollingSvg>

      <ScrollingSvg className="round">
        <svg viewBox="0 0 100 100" data-percent="100">
          <circle cx="50" cy="50" r="40" />
        </svg>
      </ScrollingSvg>
    </div>
)
```
index.css
```css
.round {
  width: 400px;
  height: auto;
  
  /* SVG */
  fill: none;
  stroke: black;
  stroke-width: 8;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: dash 2s linear forwards;
}

@keyframes dash {
  to{
    stroke-dashoffset: 0;
  }
}
```

## Implementation

The child svg within `ScrollingSvg` has an `animationPlayState` set to `paused` initially. Meanwhile, the component adds an `onscroll` event listener that compares the distance scrolled with the child component's view box. Once the window has scrolled to the bottom of the element, the top level svg has it's `animationPlayState` set to `animate`, initiating any pending animations.

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