# displaceable

> Super smooth element displacement on mouse move.

Latest version **0.5.0** (published 2019-10-13) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2019-10-13 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dino Hamzić |
| Maintainers | dinohamzic |
| Keywords | animate, animation, displace, element, elements, mouse, pointer, skew, smooth, tilt |

## Links

- npm: https://www.npmjs.com/package/displaceable
- Repository: https://github.com/dinohamzic/displaceable
- Homepage: https://github.com/dinohamzic/displaceable#readme
- Issues: https://github.com/dinohamzic/displaceable/issues
- npm.io page: https://npm.io/package/displaceable

## 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.5.0 (latest) — 2019-10-13
- 0.4.2 — 2019-10-01
- 0.4.1 — 2018-12-05
- 0.4.0 — 2018-12-02
- 0.3.0 — 2018-11-30
- 0.2.3 — 2018-11-30
- 0.2.2 — 2018-11-29
- 0.2.1 — 2018-11-29
- 0.2.0 — 2018-11-29
- 0.1.0 — 2018-11-29

## README

# displaceable

A tiny JavaScript library that handles super smooth element displacement on mouse move. Inspired by this [shot](https://dribbble.com/shots/5594494-Molley-Heltz-Inspiration-Page-Animation).

![Displaceable screen capture](screen-capture.gif)

---

## Demo and code examples

Live [demo](https://subtlebits.com/projects/displaceable) and React implementation [example](https://github.com/dinohamzic/www-subtlebits-com/blob/master/pages/projects/displaceable.js).

## Setup

#### Install:

```bash
npm install displaceable
```

## Basic usage

#### Import:

```js
import Displaceable from 'displaceable';
```

#### Initialize:

```js
// single Node
const displaceable = new Displaceable(document.getElementById('id'));
```

or

```js
// NodeList
const displaceable = new Displaceable(document.querySelectorAll('img'));
```

or

```js
// array of Nodes
const displaceable = new Displaceable([
  document.getElementById('id-1'),
  document.getElementById('id-2'),
  document.getElementById('id-3')
]);
```

## Configuration

#### `settings` object

You can pass an object as the second parameter of `Displaceable()` to modify the instance settings.

```js
const displaceable = new Displaceable(document.getElementById('node-id'), {
  displaceFactor: 5,
  lockY: true,
  resetTime: 500,
  skewFactor: 10,
  trigger: document.getElementById('trigger-id')
});
```

Property | Type | Default | Description
------ | ---- | ------- | -----------
displaceFactor | number | 3 | Multiplier for the translate transformation. The bigger the number, the more the Nodes will move. You can use a negative value to invert the direction of the movement.
lockX | boolean | false | If set to `true`, Nodes will only move on the Y axis.
lockY | boolean | false | If set to `true`, Nodes will only move on the X axis.
resetTime | number | 1000 | How fast the Nodes will return to their original position (in milliseconds).
skewFactor | number | 5 | Multiplier for the skew transformation. The bigger the number, the more Nodes will skew. You can use a negative value to invert the skewing direction.
trigger | window\|Node | window | The Node that triggers the displacement. It can be any Node with height and width greater than zero.

#### Data attributes:

- `data-displace-factor`
- `data-lock-x`
- `data-lock-y`
- `data-skew-factor`

To control each Node independently, use the following data attributes. The value set in the data attribute will override the one in the `settings` object only for that particular element.

```html
<img
  data-displace-factor="10"
  data-skew-factor="10"
  id="img-id"
/>

<div
  data-lock-y="true"
  id="div-id"
>
  I'm displaceable and I can only move horizontally!
</div>
```

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