@graphcommerce/framer-scroller NPM

Framer scroller

In short: A React API for Scroll Snap

Features:

Pagination dots
Hide scrollbar
Prev / next buttons
Resize animatable
Scrollable on mobile and desktop (if the mouse supports horizontal scrolling)
Drag support on desktop (on mobile you just scroll the diff, having the same effect)

Goals:

Should use the platforms Scroll Snap features to do the heavy lifting
Should be resizable with an animatin without excessive rerenders

Required libraries:

Framer motion
Reach digital Image for the MotionImageAspect
Material UI

Minimal example

import {
  Scroller,
  ScrollerProvider,
  ScrollerDots,
  ScrollerButton,
} from '@graphcommerce/framer-scroller'

function MyScroller() {
  return (
    <ScrollerProvider>
      <Scroller>
        <div style={{ height: 400 }}>item1</div>
        <div style={{ height: 400 }}>item2</div>
        <div style={{ height: 400 }}>item3</div>
        <div style={{ height: 400 }}>item4</div>
        <div style={{ height: 400 }}>item5</div>
        <div style={{ height: 400 }}>item6</div>
        <div style={{ height: 400 }}>item7</div>
      </Scroller>
      <ScrollerButton>Next</ScrollerButton>
    </ScrollerProvider>
  )
}

More examples

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

7 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

5 months ago

5 months ago

5 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

6 months ago

10 months ago

6 months ago

10 months ago

10 months ago

10 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

9 months ago

6 months ago

6 months ago

9 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

6 months ago

9 months ago

6 months ago

8 months ago

9 months ago

6 months ago

9 months ago

9 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago