rolly.js

Custom scroll with inertia, smooth parallax and scenes manager.

What is rolly.js?

rolly.js is a library written in javascript for building pages that moves smoothly.

This library offers 3 main features:

change the behavior of the default scroll for a smoother effect
quickly and flexibly add a customizable parallax effect to any element on a page
add any behavior to your scenes bound to the scroll state (custom transforms, seek animations…)

Checkout the demo!

Documentation

The documentation is available here: https://mickaelchanrion.github.io/rolly/

Getting started

Click to expand

Download rolly

$ npm install rolly.js

Or add it as a script:

<script src="https://unpkg.com/rolly.js@<VERSION>/dist/rolly.min.js"></script>

Setup the markup

Create your scenes:

<body>
  <style>
    [data-scene] {
      max-width: 800px;
      padding: 10vh 50px;
      margin: 10vh auto;
      font-family: sans-serif;
      font-size: 100px;
      color: #fff;
      text-align: center;
      background: linear-gradient(
        to top,
        rgb(252, 92, 125),
        rgb(106, 130, 251)
      );
      border-radius: 5px;
    }

    [data-scene]:first-child {
      background: linear-gradient(
        to bottom,
        rgb(168, 192, 255),
        rgb(63, 43, 150)
      );
    }

    [data-scene]:last-child {
      margin-bottom: 50vh;
    }
  </style>
  <div class="app">
    <div data-scene data-speed="0.2">rolly.js</div>
    <div data-scene>provides…</div>
    <div data-scene data-speed="1.2">some delicious…</div>
    <div data-scene data-speed="1.4">very delicious…</div>
    <div data-scene data-speed="1.6">parallax effects ❤️</div>
  </div>
</body>

Import the CSS of rolly

Import the CSS of rolly: node_modules/rolly.js/css/style.css

Or from unpkg: https://unpkg.com/rolly.js@<VERSION>/css/style.css

Initialize rolly

import rolly from 'rolly.js';

const r = rolly({
  view: document.querySelector('.app'),
  native: true,
  // other options
});
r.init();

Examples

You will find some examples here.

Roadmap

Create documentation
Create some examples
Fix the scrollTo function
Test and fix issues when vertical options is set to false
Change the way the easing is computed. Probably with a clean Lerp function
Implement different easing for each scene (it would add a nice organic effect 🤩)
Need a feature?

mickaelchanrion/rolly