Feature: onScroll add-on

[sc0ttj]

Do an optional add-on which makes it easy to drive animations based on scrolling, on a per-component basis.

Usage would be something like this:

Component.onScroll = onScroll;

// place an invisible marker line, fixed to the given screen height, past which 
// all components will scroll - defaults to 40%.. The higher the %, the earlier 
// the given onScroll method(s) will be triggered.
Component.onScroll.markerLine = '50%';

const Foo = new Component({ progressBarWidth: 0 });

// Each component can have a different marker line
Foo.onScroll.markerLine = '60%';

Foo.view = props => `<div style="width: ${props.progressBarWidth}%"></div>`;

Foo.onScroll(scrollProps => {
  // do stuff here, like update a progress bar
  Foo.setState({ progressBarWidth: scrollProps.progress * 100 });
});

The scrollProps would contain the following:

• progress: progress of the components view past the "marker line"
  • a value of 0.0 means the component hasn't reached the marker line yet
  • a value of 0.5 means the component view is halfway past the marker line
  • a value of 1.0 means the bottom of the comoponent view has reached the marker line
• frame: the frame number of the scroll, since the top of the components view passed the "marker line"
• direction: will be either up, down, left or right

[sc0ttj]

Done