Why Stickyroll

Nice browser. Is it antique?

No, seriously - your browser is so old that some features of patternplate don't work as expected.

Don't worry - you can either continue with a restricted version or install an up-to-date browser.

We messed up.

Sorry, but your user experience might be affected.

- Try reloading the page

- Report the problem at github.com/patternplate/patternplate

Value Proposition

Stickyroll translates page scroll to paging and a progress timeline. The view uses position: sticky to remain in-view.

Some reasons why you should give it a try

Tested in all modern browsers.
Host multiple instances on one page.
Smooth transitions from docked to undocked states
No scroll-jacking
Fully Accessible
Allows deep links
Allows skipping the entire content

Use cases

Stickyroll offers some very unique features to build views for different use cases. Here are some basic examples.

fixed position Parallax views (e.g. for product landing pages)
- Parallax Example
scrollable animation scenes (e.g. using lottie-web)
- Lottie Example

%5B%7B%22base%22%3A1%2C%22config%22%3A2%2C%22pattern%22%3A3%2C%22startBase%22%3A1%2C%22staticBase%22%3A4%2C%22isStatic%22%3A5%2C%22manifest%22%3A6%7D%2C%22%2Freact-stickyroll%2F%22%2C%7B%22docs%22%3A7%2C%22entry%22%3A8%2C%22cover%22%3A9%2C%22render%22%3A10%2C%22mount%22%3A11%2C%22ui%22%3A12%7D%2C%7B%22id%22%3A13%7D%2C%22%2Freact-stickyroll%2F%2Fstatic%22%2Ctrue%2C%7B%22vendors~client.js%22%3A14%2C%22vendors~client.js.map%22%3A15%2C%22client.js%22%3A16%2C%22client.js.map%22%3A17%7D%2C%5B18%2C19%2C20%5D%2C%5B21%5D%2C%22.%2Fsrc%2Fcover%22%2C%22.%2Frender%22%2C%22.%2Fmount%22%2C%7B%22logo%22%3A22%2C%22favicon%22%3A23%2C%22fontDefault%22%3A24%2C%22fontHeadline%22%3A24%2C%22fontCode%22%3A25%2C%22colorActive%22%3A26%2C%22colorError%22%3A27%2C%22colorWarning%22%3A28%2C%22colorInfo%22%3A29%2C%22colorSuccess%22%3A30%2C%22colorBackgroundDark%22%3A31%2C%22colorBackgroundSecondaryDark%22%3A32%2C%22colorBackgroundTertiaryDark%22%3A33%2C%22colorBorderDark%22%3A33%2C%22colorTextDark%22%3A34%2C%22colorRecessDark%22%3A35%2C%22colorBackgroundLight%22%3A34%2C%22colorBackgroundSecondaryLight%22%3A36%2C%22colorBackgroundTertiaryLight%22%3A36%2C%22colorBorderLight%22%3A36%2C%22colorTextLight%22%3A37%2C%22colorRecessLight%22%3A38%2C%22showComponents%22%3A5%7D%2C%22react-stickyroll%2Fdoc%2Fdoc%2Fvalues%22%2C%22vendors~client.2c41956dcfe3167445e6.js%22%2C%22vendors~client.2c41956dcfe3167445e6.js.map%22%2C%22client.0db6d43c21d684ebb3ec.js%22%2C%22client.0db6d43c21d684ebb3ec.js.map%22%2C%22%7Bdoc%2Cguide%7D%2F**%2F*.md%22%2C%22!**%2FCHANGELOG.md%22%2C%22CHANGELOG.md%22%2C%22guide%2F*%2Fdemo.js%22%2C%22%3Csvg%20width%3D%5C%2230%5C%22%20height%3D%5C%2230%5C%22%20viewBox%3D%5C%220%200%20100%20100%5C%22%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%5C%22%3E%5Cn%5Ct%3Cpath%20d%3D%5C%22M55%2015H15v20h70v20H55l30%2030%5C%22%20fill%3D%5C%22none%5C%22%20stroke%3D%5C%22currentColor%5C%22%20stroke-width%3D%5C%2210%5C%22%2F%3E%5Cn%3C%2Fsvg%3E%22%2C%22%3Csvg%20width%3D%5C%2224%5C%22%20height%3D%5C%2224%5C%22%20viewBox%3D%5C%220%200%20100%20100%5C%22%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%5C%22%3E%5Cn%5Ct%3Cpath%20d%3D%5C%22M55%2015H15v20h70v20H55l30%2030%5C%22%20fill%3D%5C%22none%5C%22%20stroke%3D%5C%22currentColor%5C%22%20stroke-width%3D%5C%2210%5C%22%2F%3E%5Cn%3C%2Fsvg%3E%22%2C%22-apple-system%2C%20BlinkMacSystemFont%2C%20%5C%22Segoe%20UI%5C%22%2C%20Helvetica%2C%20Arial%2C%20sans-serif%22%2C%22SFMono-Regular%2C%20Consolas%2C%20Liberation%20Mono%2C%20Menlo%2C%20Courier%2C%20monospace%22%2C%22%23FF6F00%22%2C%22%23F44336%22%2C%22%23FF9800%22%2C%22%2303A9F4%22%2C%22%238BC34A%22%2C%22%23222%22%2C%22%23111%22%2C%22%23333%22%2C%22%23fff%22%2C%22%23ddd%22%2C%22%23eee%22%2C%22%23000%22%2C%22%23444%22%5D