# scrollmagic-plugins

> Plugins for scrollmagic npm package

Latest version **1.0.8** (published 2020-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install scrollmagic-plugins
pnpm add scrollmagic-plugins
yarn add scrollmagic-plugins
bun add scrollmagic-plugins
```

## 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.8 |
| Published | 2020-09-04 |
| First published | 2020-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 47.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Le Bon Numéro |
| Maintainers | guillaume_darriet |
| Keywords | scrollmagic, plugin, es6, indicator, gsap, velocity, jquery, tweenmax, tweenlite |

## Links

- npm: https://www.npmjs.com/package/scrollmagic-plugins
- Repository: https://github.com/GuillaumeDARRIET/scrollmagic-plugins
- Homepage: https://github.com/GuillaumeDARRIET/scrollmagic-plugins#readme
- Issues: https://github.com/GuillaumeDARRIET/scrollmagic-plugins/issues
- npm.io page: https://npm.io/package/scrollmagic-plugins

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2020-09-04
- 1.0.7 — 2020-09-03
- 1.0.6 — 2020-09-03
- 1.0.5 — 2020-09-03
- 1.0.4 — 2020-09-03
- 1.0.3 — 2020-05-28
- 1.0.2 — 2020-05-15
- 1.0.1 — 2020-05-15
- 1.0.0 — 2020-05-15

## README

# ScrollMagic Plugins
### An ES6 module to use native scrollmagic plugins

```
npm install --save scrollmagic-plugins
```

or

```
yarn add scrollmagic-plugins
```

### Usage 
#### Indicator Plugin

```js
import * as ScrollMagic from "scrollmagic";
import { ScrollMagicPluginIndicator} from "scrollmagic-plugins";

ScrollMagicPluginIndicator(ScrollMagic);

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
  .addIndicators({ name: "My Indicator" })
  .setClassToggle("#my-trigger", "hidden")
  .addTo(controller);
```

#### GSAP Plugin

```js
import * as ScrollMagic from "scrollmagic";
import { TweenMax, TimelineMax } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugins";

ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
  .setTween("#my-trigger", 0.5, { opacity: 0 })
  .addTo(controller);
```

#### Velocity Plugin

```js
import * as ScrollMagic from "scrollmagic";
import Velocity from "velocity-animate";
import { ScrollMagicPluginVelocity } from "scrollmagic-plugins";

ScrollMagicPluginGsap(ScrollMagic, Velocity);

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
  .setVelocity("#my-trigger", { opacity: 0 }, { duration: 500 })
  .addTo(controller);
```

#### jQuery Plugin

```js
import * as ScrollMagic from "scrollmagic";
import $ from "jquery";
import { ScrollMagicPluginJQuery} from "scrollmagic-plugins";

ScrollMagicPluginJQuery(ScrollMagic, $);

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: $("#my-trigger") })
  .setClassToggle($("#my-trigger"), "hidden")
  .addTo(controller);
```

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