# opd-animator

> Animate on scroll web component

Latest version **0.0.7** (published 2020-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install opd-animator
pnpm add opd-animator
yarn add opd-animator
bun add opd-animator
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2020-02-05 |
| First published | 2019-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 716 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | opdahlmann |

## Links

- npm: https://www.npmjs.com/package/opd-animator
- npm.io page: https://npm.io/package/opd-animator

## Recent versions

- 0.0.7 (latest) — 2020-02-05
- 0.0.6 — 2020-01-30
- 0.0.5 — 2019-10-10
- 0.0.4 — 2019-10-10
- 0.0.3 — 2019-10-10
- 0.0.2 — 2019-10-09
- 0.0.1 — 2019-10-09

## README

# opd-animator


Animation build with IntersectionObserver, animates when visible in browser


## Properties

| Property       | Attribute       | Description | Type     | Default       |
| -------------- | --------------- | ----------- | -------- | ------------- |
| `animDealy`    | `anim-dealy`    |             | `string` | `"0"`         |
| `animDuration` | `anim-duration` |             | `string` | `"1s"`        |
| `animType`     | `anim-type`     |             | `string` | `"slideInUp"` |

## Animation types
- slindeInUp
- slideInDown
- slideInLeft
- slideInRight
- slindeInUpSmall
- slideInSmall


## Plug into Angular

In src/main.js add:



    import { defineCustomElements, applyPolyfills } from 'opd-animator/loader';

    
    defineCustomElements(window);
    applyPolyfills().then(() => {
        defineCustomElements(window);
      });


In you Module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class AppModule { }


In html

    <opd-animator anim-dealy="800ms" 
    anim-duration="1s" anim-type="slideInLeft">
        <H1>Animating content</H1>
    </opd-animator>

<!-- <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script> -->

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