How To: BasicScroll in Sage 9

sage
,
1

BasicScroll is super cool. Here’s how to use it in Sage 9.

Install

yarn add basicscroll

Import in Javascript

In the appropriate javascript route, probably common.js, at the top add:

import * as basicScroll from 'basicscroll'

Add BasicScroll functionality

In the same route, add your BasicScroll functionality (this example taken from the BasicScroll documentation)

const instance = basicScroll.create({
  elem: document.querySelector('.element'),
  from: 'top-bottom',
  to: 'middle-middle',
  props: {
    '--opacity': {
      from: .01,
      to: .99
    }
  }
})

instance.start()

.element {
  /*
  * Use the same CSS variable as specified in our instance.
  */
  opacity: var(--opacity);
  /*
  * The will-change CSS property provides a way for authors to hint browsers about the kind of changes
  * to be expected on an element, so that the browser can setup appropriate optimizations ahead of time
  * before the element is actually changed.
  */
  will-change: opacity;
}

And of course add your markup to your templates

I’m not going to write an example for this, since it’s entirely dependent on your needs.

I hope this helps!

8 Likes