{"repo":"squirrelsquirrel78/react-scrollama","free":true,"listed":false,"github":"https://github.com/squirrelsquirrel78/react-scrollama","clone":"git clone https://github.com/squirrelsquirrel78/react-scrollama.git","description":"Simple scrollytelling with the IntersectionObserver in React.","language":"JavaScript","stars":405,"topics":["scrollytelling","react","intersection-observer"],"license":"MIT","category":"ui-components","readme_excerpt":"React Scrollama 🦙🦙 React Scrollama is a simple and silky library for scrollytelling. It relies on IntersectionObserver and sticky positioning over scroll listeners. It is originally adapted from Russell Samora's Scrollama. A few examples of ambitious interactive stories that were built with React Scrollama… 17 interactive visualization stories using React Scrollama for scrollytelling Comment Tati a imprimé sa marque à Barbès by Fabien Casaleggio The scramble to secure America’s voting machines by Beatrice Jin Demo A live demo lives here. Basic step triggers Sticky graphic on the side Install React Scrollama can be installed as an npm package: Usage A Scrollama component wraps a set of steps. Each Step component must wrap a DOM element (i.e. not just text). provides an interface for listening in on scroll triggers like entering or exiting a step. (Here's a full list of available props.) A basic example: API React Scrollama components do not render into the DOM. They are meant to set up Intersection Observers on the elements inside the components. In the code above, only the elements would show up in the DOM. Scrollama These are the props you can set on the Scrollama component itself: Prop Type Default Description -------------- ---------------------------------------------------- ------- --------------------------------------------------------------------------------------- offset number (from 0 to 1) or pixel value (e.g. \"300px\") 0.3 How far from the top of the viewport to ","default_branch":null,"files":null,"tree":[],"storefront":"/r/squirrelsquirrel78","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/squirrelsquirrel78/react-scrollama/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}