1.0.0 • Published 2 years ago
svelte-dodge v1.0.0
Svelte-Dodge
Make components dodge the pointer.
About
- Written in Svelte with Typescript
- No external 3rd party dependencies
- Easy-to-use by just wrapping any element or component
- Dispatches movement events
- Multiple movement modes
- Supply custom movement functions using available helpers
Installation
npm i -D svelte-dodgeUsage
<script>
import { Dodge } from 'svelte-dodge';
</script>
<Dodge>
<div>
This dodges now
</div>
</Dodge>Props
| Prop | Default | Description |
|---|---|---|
| activationDistance | 20 | Activation distance in px. |
| box | right 400, rest 0 | Size of possible movement area (additional to element size) in px in the directions up, down, left and right. |
| customMovement | ... | Supply a custom movement function. Set mode to 'custom' to use. |
| dodge | true | Toggle the movement. |
| duration | 0.3 | Transition duration in s when movement is triggered. If set to 0 no transition is used. |
| mode | 'kite-flip' | See movement. |
| moveDistance | 100 | Additional movement in the desired direction when activated. |
| rate | 0.1 | Update rate on cursor position and movement trigger detection in ms. If set to 0 it uses the native browser rate. |
Events
| Event | Description |
|---|---|
| move | Triggered whenever movement function is called with cursor close enough. |
| transitionstart | Triggered whenever element transition starts. Only if duration > 0. |
| transitionend | Triggered whenever element transition ends. Only if duration > 0. |
Movement
Movement is triggered whenever the cursor moves inside the activation area. It is also triggered when a click happens in the activation area. Movement can be disabled with the 'dodge' flag.
| Value | Description |
|---|---|
| 'custom' | Use the custom prop to supply a custom movement function. It takes box, element and cursor and should output new x,y coordinates for the element. |
| 'kite' | Move away from cursor. When edge of area is reached flip to other side of area. |
| 'kite-flip' | Move away from cursor. When edge of area is reached flip to other side of cursor. |
| 'random' | Move to random spot im movement area when triggered. Make sure the cursor is not inside element after moving. |