https://github.com/jramke/motion-swiper

Draggable slider with a fluid bending motion effect but no Threejs as usual
https://github.com/jramke/motion-swiper

gsap motion-effect slider swiper threejs

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jramke/motion-swiper
• Owner: jramke
• License: mit
• Created: 2023-05-01T17:13:11.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-21T20:05:09.000Z (about 1 year ago)
• Last Synced: 2024-04-23T16:08:49.773Z (10 months ago)
• Topics: gsap, motion-effect, slider, swiper, threejs
• Language: JavaScript
• Homepage: https://motion-swiper.vercel.app
• Size: 1 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#  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



    


        


            


                

            

        

        ...


    



```


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

}

```