@timroussilhe/smooth

v0.2.3

Published

2 years ago

Smooth plugin that allow all basic scroll interactions

Downloads

0High
0Medium
0Low

timroussilhe

Smooth

enter image description here

What's Smooth?

Custom library to handle scroll.

There is 3 main things that Smooth can take care of for you :

Wrapping a container ( usually the page ) and adding a smooth scroll ( with some lerping/momemtum to it )
- This can be some by keeping the real scroll and scrollbar for a more native experience
- Or this can be done using virtual-scroll for a more smooth experience
Handling Parallax
- Smooth will act as a controller to handle parallax
Scroll Trigger, to reveal element when they reach a certain

The library works on mobile but I recommend to keep the real scroll on mobile.

Usage

HTML

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Title</title>
  </head>
  <body>
    <main id="content">
      <section class="page-wrapper">...</section>
    </main>
  </body>
</html>

Javascript

Create a smooth instance

import Smooth from '@timroussilhe/smooth';

this.smooth = new Smooth({
  scrollElement: document.querySelector('.scroll-wrapper'),
  scrollOptions: {
    useVirtualScroll: false,
    smoothContainer: true,
    easing: 0.12,
    friction: null,
  }
});

this.smooth.start();

Add Scroll Elements

const elementParallax = {
  el: document.querySelector('.scroll-wrapper'),

  parallax: [
    {
      start: 0,
      end: 500,
      properties: [['translateY', 0, 250]],
      easing: 'easeInOutCubic',
      viewFactorStart: 0,
      viewFactorEnd: 0,
    },
  ],
};

const $footer = document.querySelector('footer');

const elementTrigger = {
  el: $footer,

  trigger: {
    start: 'in-viewport',
    end: 'out-viewport',
    viewFactorStart: 0,
    viewFactorEnd: 0,
    callback: (before) => {
      if (before === 0) {
        $footer.classList.add('footer--in');
      } else if (before === -1) {
        $footer.classList.remove('footer--in');
      }
    },
  },
};
this.smooth.addElements([elementParallax, elementTrigger]);

Reflow/resize

this.smooth.reset(this.getScrollElement());
this.smooth.resize();

API

Smooth Properties/Options

| property | type | default | description | |------------------ |------------- |------------ |---------------------------------------------------- | | scrollElement | DOM element | null | required DOM element for the Scroll wrapper | | scrollbarElement | DOM element | null | optional DOM element for the Scrollbar container | | scrollOptions | Object | {} | required Option for the Scroll | | scrollbarOptions | Object | {} | optional Option for the Scroll |

Scroll Properties/Options

Scrollbar Properties/Options

Smooth Element Option

Smooth Element Paralaxe

Smooth Element Trigger

| property | type | description | |----------------- |--------------------------------- |--------------------------------------------------------------------------------------------------------------------------------------------------- | | start | string | number | start value for the scroll element. This can be a number or use 'in-viewport' 'out-viewport' | | end | string | number | end value for the scroll element. This can be a number or use 'in-viewport' 'out-viewport' | | viewFactorStart | string | number | factor to add to the start value, this can be a number that will be used as a factor of the element height or a fixed pixel value. Ex: 200px | | viewFactorEnd | string | number | factor to add to the end value, this can be a number that will be used as a factor of the element height or a fixed pixel value. Ex: 200px | | callback | function (scrollPosition) => {} | callback function to be called when the trigger start or end scroll values are reached. scrollPosition is -1 for before, 0 for in, 1 for after. | | repeat | boolean | Repeat the callback function after the first trigger in. |

Smooth Method