# paralaxer

> A react component that will provide css animations on it's children, based on scroll position

Latest version **1.1.0** (published 2018-10-03) · ISC license · 0 weekly downloads

## Install

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

## 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.1.0 |
| Published | 2018-10-03 |
| First published | 2018-09-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 306 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sune Fengel |
| Maintainers | fengelz |
| Keywords | react, component, visual |

## Links

- npm: https://www.npmjs.com/package/paralaxer
- Repository: https://github.com/fengelz/react-coord-compass
- Homepage: https://github.com/fengelz/paralaxer#readme
- Issues: https://github.com/fengelz/paralaxer/issues
- npm.io page: https://npm.io/package/paralaxer

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.4.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-10-03
- 1.0.0 — 2018-10-03
- 0.1.0 — 2018-09-27

## README

# Paralaxer

## Introduction

> A react component that will animate its nested children based on scroll position. Each child that will be animated will take an animation object containing either a to and from style object, or multiple steps from 0 - 100. The Paralaxer Wrapper takes 2 / 4 arguments start and end, which are absolute values related to the document. or tresholdStart and tresholdEnd which are relative to the Paralaxer wrappers distance from the top of the screen.

Sample at https://paralaxer.fengel.com/

## Code Samples

```javascript

<Paralaxer start={0} end={this.state.docHeight / 1.5}>
  <h1 
  style={{ transformOrigin: 'center'}}
  animation={{
    from:{ transform: 'rotate(360deg) skew(0deg) scale(1)'}, 
    to:{ transform: 'rotate(0deg) skew(0deg) scale(1)'},
  }}>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(-200vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >P</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(-150vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >a</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(-100vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >r</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(-70vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >a</span>
    <span 
    animation={{
      0:{ opacity: 1},
      50:{ opacity: 0.5}, 
      100:{ opacity: 1},
    }}
      >l</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(70vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >a</span>
    <span 
      animation={{
      0:{ transform: 'translateY(0vh)'},
      50:{ transform: 'translateY(100vh)'}, 
      100:{ transform: 'translateY(0vh)'},
    }}
      >x</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(150vh)'},
        100:{ transform: 'translateY(0vh)'},
      }}
      >e</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(200vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >r</span>
  </h1>
</Paralaxer>
```

## Installation

> yarn add or npm install 'paralaxer'

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