# vue-scroll-motion

> vue scroll animation library like scroll-timeline

Latest version **0.0.25** (published 2023-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-scroll-motion
pnpm add vue-scroll-motion
yarn add vue-scroll-motion
bun add vue-scroll-motion
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.25 |
| Published | 2023-11-08 |
| First published | 2022-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | TK Moon |
| Maintainers | tk-moon |
| Keywords | scroll-motion, vue scroll animation, vue-scroll-library, scroll-animation, scroll-timeline |

## Links

- npm: https://www.npmjs.com/package/vue-scroll-motion
- Repository: https://github.com/TK-moon/vue-scroll-motion
- Homepage: https://github.com/TK-moon/vue-scroll-motion#readme
- Issues: https://github.com/TK-moon/vue-scroll-motion/issues
- npm.io page: https://npm.io/package/vue-scroll-motion

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.45
- [lodash](https://npm.io/package/lodash.md) ^4.17.21

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

- 0.0.25 (latest) — 2023-11-08
- 0.0.16 — 2022-12-11
- 0.0.15 — 2022-12-09
- 0.0.14 — 2022-12-07
- 0.0.13 — 2022-12-05
- 0.0.12 — 2022-12-05
- 0.0.11 — 2022-12-05
- 0.0.10 — 2022-12-05
- 0.0.9 — 2022-12-05
- 0.0.8 — 2022-12-05
- 0.0.7 — 2022-12-04
- 0.0.2 — 2022-12-04
- 0.0.1 — 2022-12-04

## README

# vue-scroll-motion

[Demo Link](https://tk-moon.github.io/vue-scroll-motion/demo/)

![demo](https://user-images.githubusercontent.com/59918655/209465522-b3f89c2d-3166-4671-88a2-a6d33835e80e.gif)

## install

```
npm install vue-scroll-motion
```

---

## Import components

```
import VueScrollMotion from 'vue-scroll-motion'
```

---

## Example

```
<template>
  <VueScrollMotion
    disable_multiple_animation
    :animation="[
      { opacity: 0, translate: '0 100', rotate: 180 },
      { opacity: 1, translate: '0 0', rotate: 0 },
      { opacity: 0, translate: '0 -100', rotate: -180 },
    ]"
  >
    ...
  </VueScrollMotion>
</template>

<script lang="ts">
import { defineComponent } from "vue"

import VueScrollMotoin from 'vue-scroll-motion'

export default defineComponent({
  components: {
    VueScrollMotion,
  },
})
</script>
```

---

## Options

| option                     | description                                      | type                   | default |
| -------------------------- | ------------------------------------------------ | ---------------------- | ------- |
| animation                  | [Reference](#animation-prop-example)             | `Array<AnimationType>` |
| disable_multiple_animation | Prevent animations from running at the same time | `boolean`              | false   |
| height                     | Section height for scroll percentage.            | `number`               | 100(vh) |

---

## Animation Prop Example

```
[
  { opacity: 0, translate: '0 100' },
  { opacity: 1, translate: '0 0' },
  { opacity: 0, translate: '0 -100' },
]
```

### Explain

| scroll percentage | description                                         |
| ----------------- | --------------------------------------------------- |
| 0% ~ 50% scroll   | `opacity` `0` to `1` and `translateY` `100` to `0`  |
| 50% ~ 100% scroll | `opacity` `1` to `0` and `translateY` `0` to `-100` |

> If the component is located at the top of the document, the scroll percentage starts at 50%.

---

## Supported Animation Type

`opacity`, `translate`, `rotate`, `scale`

> Support for custom animation features will be provided

---

## Support

- (!) Vue3
- Chrome >= 104
- Safari >= 14.1
- IOS Safari >= 14.5

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