https://github.com/zavalit/steper
A lightweight JavaScript library for draggable and slider animations
https://github.com/zavalit/steper
Last synced: 9 months ago
JSON representation
A lightweight JavaScript library for draggable and slider animations
- Host: GitHub
- URL: https://github.com/zavalit/steper
- Owner: zavalit
- Created: 2024-07-05T08:17:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-09T15:12:44.000Z (over 1 year ago)
- Last Synced: 2024-07-09T19:25:58.215Z (over 1 year ago)
- Language: TypeScript
- Size: 153 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Steper
A lightweight JavaScript library for draggable and slider animations.
[Demo Examples](https://steper.netlify.app/)
## Installation
```bash
npm install steper
```
## Usage
HTML markup
````html
- slide 1
- slide 2
- slide 3
left
right
````
Javascript Logic
```js
import { useDraggableAnimation, useSliderAnimation } from 'steper';
const steperRef = document.getElementById('slider')
//make it draggable
useDraggableAnimation(steperRef);
// and or slide it
const move = useSliderAnimation(steperRef);
// to left
document.getElementById('left').addEventListener('click', () => move(-1))
// to right
document.getElementById('right').addEventListener('click', () => move(1))
````
## API
### useDraggableAnimation(ref, onDragStart, onDragEnd)
* `ref`: The reference to the HTML element.
* `onDragStart`: Callback function when dragging starts.
* `onDragEnd`: Callback function when dragging ends.
### useSliderAnimation(ref, duration, onSlideStart, onSlideEnd)
* `ref`: The referenceC to the HTML element.
* `duration`: Duration of the slide animation in seconds.
* `onSlideStart`: Callback function when sliding starts.
* `onSlideEnd`: Callback function when sliding ends.
## License
MIT