# motion-swiper

> Draggable slider with a fluid bending motion effect but no Threejs as usual

Latest version **1.0.6** (published 2024-06-21) · GPL-3.0-only license · 0 weekly downloads

## Install

```sh
npm install motion-swiper
pnpm add motion-swiper
yarn add motion-swiper
bun add motion-swiper
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2024-06-21 |
| First published | 2023-12-03 |
| Weekly downloads | 0 |
| License | GPL-3.0-only |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 52.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40 |
| Author | Joost Ramke |
| Keywords | slider, gsap, draggable, swiper, motion |

## Links

- npm: https://www.npmjs.com/package/motion-swiper
- Repository: https://github.com/jramke/motion-swiper
- Homepage: https://motion-swiper.vercel.app/
- Issues: https://github.com/jramke/motion-swiper/issues
- npm.io page: https://npm.io/package/motion-swiper

## Dependencies (1)

- [gsap](https://npm.io/package/gsap.md) ^3.12.x

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 1.0.6 (latest) — 2024-06-21
- 1.0.5 — 2023-12-24
- 1.0.4 — 2023-12-16
- 1.0.3 — 2023-12-03
- 1.0.2 — 2023-12-03
- 1.0.1 — 2023-12-03
- 1.0.0 — 2023-12-03

## README

# <img src="static/favicon.png" height="20" /> MotionSwiper

https://github.com/jramke/motion-swiper/assets/81250358/ff27114b-d73f-424a-bbf6-b52fa247e12d

Introducing MotionSwiper – a minimal draggable slider with a seamless and fluid bending motion effect like seen in [this pen by Jesper Landberg](https://codepen.io/ReGGae/live/povjKxV).

It's built with GSAP and does not rely on WebGL/ThreeJs or Canvas, ensuring there are no drawbacks in terms of **accessibility** or **performance**.

## Demo
View a live demo here: https://motion-swiper.vercel.app/

MotionSwiper in the wilds:
- https://www.joostramke.com/
- https://www.brandium.nl/agency/


## Getting started

MotionSwiper is created with [GSAP](https://gsap.com/) so its installed with MotionSwiper if needed.

```bash
npm i motion-swiper
```

### Import
```js
// MotionSwiper functionality
import MotionSwiper from "motion-swiper";

// MotionSwiper styles
import "motion-swiper/css"; // or "motion-swiper/scss"
```

### Initialize
Initialze the MotionSwiper class with a selector or an element as first parameter and a optional option object as second parameter. 

The values in this example are the default values.
```js
const motionSwiper = new MotionSwiper('.motion-swiper', {
    loop: true, // loop throug slides
    lerp: 0.1, // amout of lerp
    speed: 2.5, // speed of the swiper when sliding
    centered: true, // first slide is centered
    teasing: true, // move on scroll (needs "gsap/ScrollTrigger") 
    normalizingSpeed: 0.8, // how fast the slides go back to normal
    swipeOnClick: true, // swipe to slide when clicking it
});
```

### Markup
```html
<div class="motion-swiper">
    <div class="motion-swiper__wrapper">

        <div class="motion-swiper__slide">
            <div class="motion-swiper__inner">
                <!-- Content like an image -->
            </div>
        </div>
        ...

    </div>
</div>
```

### Styling
The `.motion-swiper` class comes with some css custom properties you can override to customize MotionSwiper.

```css
.motion-swiper {
    --swiper-slide-spacing: 1.5vw;
    --swiper-height: 35vh;
    --swiper-slide-width: 40vw;
}
```

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