@graphcommerce/framer-scroller NPM | npm.io

8.0.8 • Published 7 months ago

Install

Weekly downloads

-

License

-

Repository

Last release

7 months ago

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

See the example

@infinitebrahmanuniverse/nolb-_graph @everything-registry/sub-chunk-373 @graphcommerce/magento-graphcms @zalastax/nolb-_graph

9.0.0-canary.94

7 months ago

9.0.0-canary.89

8 months ago

9.0.0-canary.88

8 months ago

9.0.0-canary.92

8 months ago

9.0.0-canary.93

8 months ago

9.0.0-canary.87

8 months ago

8 months ago

9.0.0-canary.83

8 months ago

9.0.0-canary.85

8 months ago

9.0.0-canary.84

8 months ago

9.0.0-canary.86

8 months ago

9.0.0-canary.81

9 months ago

9.0.0-canary.82

9 months ago

9.0.0-canary.69

10 months ago

9.0.0-canary.68

11 months ago

9.0.0-canary.61

11 months ago

9.0.0-canary.60

11 months ago

9.0.0-canary.63

11 months ago

9.0.0-canary.62

11 months ago

9.0.0-canary.65

11 months ago

9.0.0-canary.64

11 months ago

9.0.0-canary.67

11 months ago

9.0.0-canary.66

11 months ago

9.0.0-canary.70

10 months ago

9.0.0-canary.79

10 months ago

9.0.0-canary.72

10 months ago

9.0.0-canary.71

10 months ago

9.0.0-canary.74

10 months ago

9.0.0-canary.73

10 months ago

9.0.0-canary.76

10 months ago

9.0.0-canary.75

10 months ago

9.0.0-canary.78

10 months ago

9.0.0-canary.77

10 months ago

9.0.0-canary.80

10 months ago

9.0.0-canary.58

11 months ago

9.0.0-canary.57

11 months ago

9.0.0-canary.59

11 months ago

9.0.0-canary.54

11 months ago

9.0.0-canary.56

11 months ago

9.0.0-canary.55

11 months ago

8.1.0-canary.30

12 months ago

8.1.0-canary.32

12 months ago

8.1.0-canary.31

12 months ago

8.1.0-canary.34

12 months ago

8.1.0-canary.33

12 months ago

8.1.0-canary.36

12 months ago

8.1.0-canary.35

12 months ago

8.1.0-canary.38

12 months ago

8.1.0-canary.37

12 months ago

8.1.0-canary.39

12 months ago

8.1.0-canary.20

1 year ago

8.1.0-canary.23

1 year ago

8.1.0-canary.22

1 year ago

8.1.0-canary.25

1 year ago

8.1.0-canary.24

1 year ago

8.1.0-canary.27

1 year ago

8.1.0-canary.26

1 year ago

8.1.0-canary.29

1 year ago

8.1.0-canary.28

1 year ago

8.1.0-canary.50

11 months ago

8.1.0-canary.52

11 months ago

8.1.0-canary.53

11 months ago

8.1.0-canary.41

12 months ago

8.1.0-canary.40

12 months ago

8.1.0-canary.43

11 months ago

8.1.0-canary.42

11 months ago

8.1.0-canary.45

11 months ago

8.1.0-canary.44

11 months ago

8.1.0-canary.47

11 months ago

8.1.0-canary.46

11 months ago

8.1.0-canary.49

11 months ago

8.1.0-canary.48

11 months ago

10 months ago

8.1.0-canary.16

1 year ago

8.1.0-canary.18

1 year ago

8.1.0-canary.17

1 year ago

8.1.0-canary.19

1 year ago

1 year ago

8.1.0-canary.14

1 year ago

8.1.0-canary.13

1 year ago

8.1.0-canary.15

1 year ago

8.1.0-canary.12

1 year ago

8.1.0-canary.11

1 year ago

1 year ago

8.1.0-canary.10

1 year ago

1 year ago

1 year ago

1 year ago

8.0.5-canary.11

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

8.0.5-canary.10

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

8.0.0-canary.100

1 year ago

8.0.0-canary.98

1 year ago

8.0.0-canary.99

1 year ago

8.0.0-canary.97

1 year ago

1 year ago

8.0.0-canary.94

1 year ago

8.0.0-canary.95

1 year ago

8.0.0-canary.93

1 year ago

8.0.0-canary.92

1 year ago

8.0.0-canary.91

1 year ago

8.0.0-canary.89

1 year ago

8.0.0-canary.90

1 year ago

8.0.0-canary.78

1 year ago

8.0.0-canary.79

1 year ago

8.0.0-canary.80

1 year ago

8.0.0-canary.81

1 year ago

8.0.0-canary.82

1 year ago

8.0.0-canary.87

1 year ago

8.0.0-canary.88

1 year ago

8.0.0-canary.83

1 year ago

8.0.0-canary.84

1 year ago

8.0.0-canary.85

1 year ago

8.0.0-canary.86

1 year ago

8.0.0-canary.76

1 year ago

8.0.0-canary.77

1 year ago

8.0.0-canary.75

1 year ago

8.0.0-canary.73

1 year ago

8.0.0-canary.74

1 year ago

8.0.0-canary.72

1 year ago

8.0.0-canary.69

1 year ago

8.0.0-canary.70

1 year ago

8.0.0-canary.71

1 year ago

7.1.0-canary.68

1 year ago

7.1.0-canary.66

1 year ago

7.1.0-canary.67

1 year ago

7.1.0-canary.65

2 years ago

7.1.0-canary.64

2 years ago

7.1.0-canary.63

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

8.0.0-canary.40

2 years ago

7.0.1-canary.15

2 years ago

7.0.1-canary.14

2 years ago

7.0.1-canary.13

2 years ago

7.0.1-canary.12

2 years ago

7.0.1-canary.11

2 years ago

7.0.1-canary.10

2 years ago

6.2.0-canary.60

2 years ago

6.2.0-canary.57

2 years ago

6.2.0-canary.59

2 years ago

6.2.0-canary.58

2 years ago

2 years ago

2 years ago

7.1.0-canary.36

2 years ago

7.1.0-canary.37

2 years ago

7.1.0-canary.38

2 years ago

7.1.0-canary.39

2 years ago

7.1.0-canary.32

2 years ago

7.1.0-canary.33

2 years ago

7.1.0-canary.34

2 years ago

7.1.0-canary.35

2 years ago

7.1.0-canary.30

2 years ago

7.1.0-canary.31

2 years ago

7.1.0-canary.29

2 years ago

7.1.0-canary.25

2 years ago

7.1.0-canary.26

2 years ago

7.1.0-canary.27

2 years ago

7.1.0-canary.28

2 years ago

7.1.0-canary.21

2 years ago

7.1.0-canary.22

2 years ago

7.1.0-canary.23

2 years ago

7.1.0-canary.24

2 years ago

7.1.0-canary.20

2 years ago

7.1.0-canary.18

2 years ago

7.1.0-canary.19

2 years ago

7.1.0-canary.14

2 years ago

7.1.0-canary.15

2 years ago

7.1.0-canary.16

2 years ago

7.1.0-canary.17

2 years ago

7.1.0-canary.10

2 years ago

2 years ago

7.1.0-canary.11

2 years ago

7.1.0-canary.12

2 years ago

7.1.0-canary.13

2 years ago

2 years ago

6.2.0-canary.91

2 years ago

6.2.0-canary.90

2 years ago

6.2.0-canary.93

2 years ago

6.2.0-canary.92

2 years ago

6.2.0-canary.88

2 years ago

6.2.0-canary.87

2 years ago

6.2.0-canary.89

2 years ago

6.2.0-canary.84

2 years ago

6.2.0-canary.83

2 years ago

6.2.0-canary.86

2 years ago

6.2.0-canary.85

2 years ago

6.2.0-canary.98

2 years ago

6.2.0-canary.95

2 years ago

6.2.0-canary.94

2 years ago

6.2.0-canary.97

2 years ago

6.2.0-canary.96

2 years ago

7.1.0-canary.61

2 years ago

7.1.0-canary.62

2 years ago

7.1.0-canary.60

2 years ago

6.2.0-canary.71

2 years ago

6.2.0-canary.70

2 years ago

6.2.0-canary.66

2 years ago

6.2.0-canary.65

2 years ago

6.2.0-canary.68

2 years ago

6.2.0-canary.67

2 years ago

7.1.0-canary.58

2 years ago

6.2.0-canary.62

2 years ago

7.1.0-canary.59

2 years ago

6.2.0-canary.61

2 years ago

6.2.0-canary.64

2 years ago

6.2.0-canary.63

2 years ago

7.1.0-canary.54

2 years ago

7.1.0-canary.55

2 years ago

7.1.0-canary.56

2 years ago

7.1.0-canary.57

2 years ago

7.1.0-canary.50

2 years ago

7.1.0-canary.51

2 years ago

6.2.0-canary.69

2 years ago

7.1.0-canary.52

2 years ago

7.1.0-canary.53

2 years ago

6.2.0-canary.80

2 years ago

2 years ago

6.2.0-canary.82

2 years ago

6.2.0-canary.81

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

6.2.0-canary.77

2 years ago

2 years ago

6.2.0-canary.76

2 years ago

2 years ago

6.2.0-canary.79

2 years ago

2 years ago

6.2.0-canary.78

2 years ago

7.1.0-canary.47

2 years ago

6.2.0-canary.73

2 years ago

7.1.0-canary.48

2 years ago

2 years ago

6.2.0-canary.72

2 years ago

7.1.0-canary.49

2 years ago

6.2.0-canary.75

2 years ago

6.2.0-canary.74

2 years ago

7.1.0-canary.43

2 years ago

7.1.0-canary.44

2 years ago

7.1.0-canary.45

2 years ago

7.1.0-canary.46

2 years ago

7.1.0-canary.41

2 years ago

7.1.0-canary.42

2 years ago

6.2.0-canary.56

2 years ago

6.2.0-canary.44

2 years ago

6.2.0-canary.43

2 years ago

6.2.0-canary.46

2 years ago

6.2.0-canary.45

2 years ago

6.2.0-canary.40

2 years ago

6.2.0-canary.42

2 years ago

6.2.0-canary.41

2 years ago

6.2.0-canary.48

2 years ago

6.2.0-canary.47

2 years ago

6.2.0-canary.49

2 years ago

6.2.0-canary.55

2 years ago

6.2.0-canary.54

2 years ago

6.2.0-canary.51

2 years ago

6.2.0-canary.50

2 years ago

6.2.0-canary.53

2 years ago

6.2.0-canary.52

2 years ago

6.2.0-canary.35

2 years ago

6.2.0-canary.34

2 years ago

6.2.0-canary.37

2 years ago

6.2.0-canary.36

2 years ago

6.2.0-canary.39

2 years ago

6.2.0-canary.38

2 years ago

7.0.0-canary.21

2 years ago

6.2.0-canary.22

2 years ago

6.2.0-canary.21

2 years ago

6.2.0-canary.24

2 years ago

6.2.0-canary.23

2 years ago

6.2.0-canary.20

2 years ago

6.2.0-canary.29

2 years ago

7.0.0-canary.13

2 years ago

7.0.0-canary.12

2 years ago

6.2.0-canary.26

2 years ago

6.2.0-canary.25

2 years ago

6.2.0-canary.28

2 years ago

6.2.0-canary.27

2 years ago

6.2.0-canary.33

2 years ago

6.2.0-canary.32

2 years ago

6.2.0-canary.31

2 years ago

6.2.0-canary.30

2 years ago

6.2.0-canary.11

2 years ago

6.2.0-canary.10

2 years ago

6.2.0-canary.13

2 years ago

6.2.0-canary.12

2 years ago

6.2.0-canary.19

2 years ago

6.2.0-canary.18

2 years ago

6.2.0-canary.15

2 years ago

6.2.0-canary.14

2 years ago

6.2.0-canary.17

2 years ago

6.2.0-canary.16

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

6.0.0-canary.51

2 years ago

6.0.0-canary.50

2 years ago

6.0.0-canary.49

2 years ago

6.0.0-canary.44

2 years ago

6.0.0-canary.43

2 years ago

6.0.0-canary.42

2 years ago

6.0.0-canary.41

2 years ago

6.0.0-canary.48

2 years ago

6.0.0-canary.47

2 years ago

6.0.0-canary.46

2 years ago

6.0.0-canary.45

2 years ago

6.0.0-canary.54

2 years ago

6.0.0-canary.53

2 years ago

6.0.0-canary.52

2 years ago

6.0.0-canary.40

2 years ago

6.0.0-canary.39

2 years ago

6.0.0-canary.38

2 years ago

6.0.0-canary.33

2 years ago

6.0.0-canary.32

2 years ago

6.0.0-canary.37

2 years ago

6.0.0-canary.36

2 years ago

6.0.0-canary.35

2 years ago

6.0.0-canary.34

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

6.0.2-canary.10

2 years ago

6.0.2-canary.13

2 years ago

6.0.2-canary.12

2 years ago

6.0.2-canary.15

2 years ago

6.0.2-canary.14

2 years ago

6.0.2-canary.17

2 years ago

6.0.2-canary.16

2 years ago

6.0.2-canary.19

2 years ago

6.0.2-canary.18

2 years ago

2 years ago

6.0.2-canary.22

2 years ago

6.0.2-canary.21

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

6.0.0-canary.29

2 years ago

6.0.0-canary.28

2 years ago

6.0.0-canary.27

2 years ago

6.0.0-canary.31

2 years ago

6.0.0-canary.30

2 years ago

6.0.0-canary.26

2 years ago

6.0.0-canary.25

2 years ago

6.0.0-canary.22

2 years ago

6.0.0-canary.21

2 years ago

6.0.0-canary.20

2 years ago

6.0.0-canary.24

2 years ago

6.0.0-canary.23

2 years ago

5.2.0-canary.13

2 years ago

5.2.0-canary.14

2 years ago

5.2.0-canary.15

2 years ago

5.2.0-canary.16

2 years ago

5.2.0-canary.17

2 years ago

5.2.0-canary.18

2 years ago

5.2.0-canary.19

2 years ago

5.2.0-canary.10

2 years ago

5.2.0-canary.11

2 years ago

5.2.0-canary.12

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

5.1.0-canary.11

2 years ago

5.1.0-canary.10

2 years ago

5.0.0-canary.14

3 years ago

2 years ago

2 years ago

4.31.0-canary.0

3 years ago

4.31.0-canary.2

3 years ago

4.31.0-canary.1

3 years ago

4.31.0-canary.4

3 years ago

4.31.0-canary.3

3 years ago

4.31.0-canary.6

3 years ago

4.31.0-canary.5

3 years ago

4.31.0-canary.8

3 years ago

4.31.0-canary.7

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4.30.0-canary.1

3 years ago

4.30.0-canary.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago