React Stickyroll

What is stickyroll?

Stickyroll provides a fullscreen view with a progression listener.
While the view stays in place, scrolling is translated to pages, each with a progressing timeline while the user scrolls. Building amazing parallax landing pages has never been this easy.

Stickyroll, it's time to scroll

Built for all screen sizes

Stickyroll relies on the viewport and therefore ensures responsive behavior.
Add your own logic to define how to display the content on different screen sizesShow me how

1 of 5
Skip

A11y

Stickyroll is fully accessible.
It relies on simple event listeners and therefore allows the power of native accessibility features.

Low dependency tree

Stickyroll only has React as a dependency. All other packages are part of the Stickyroll monorepo and only use React as a dependency. or none at all.
Having control over dependencies can greatly improve debugging and deciding where to look for help.
On top of the basic features Stickyroll provides some useful components via "Styled Components". The use of these components is fully optional.

Amazing API

Stickyroll is very easy to use and always a joy to work with.
It follows the best practices provided by the React team and other amazing developers. Rendering is either done via a render prop or a child function as seen in many popular libraries.

Typescript

Stickyroll is fully typed. Types come with stickyroll. There is no need to install them from another repository.

Browser support

We test Stickyroll in various browsers on multiple platforms to ensure a stable build. All modern browsers should return the same behavior. Older browsers might be supported by the core Components but the styled elements use css variables and can therefore not work in IE.
We do our best to support Edge as long as it has market share.

Documentation

We put a lot of work into documentation. Take a look at our Guides to learn about Stickyroll in small courses.
Most courses are small enough to do them in a few minutes and written for beginners.