Tarun Dugar tarun-dugar

## usage.js
smoothScroll({
  scrollElement: window,
  scrollAmount: 300,
  cubicBezierPoints: {
    x1: 0.2,
    x2: 0.5,
    y1: 0.5,
    y2: 0.9
  },
  onRefUpdateCallback: (animationInstance) => {

## scrollOnEachTick.js
function smoothScroll(scrollParams) {
  const elementToScroll = scrollParams.element;
  const isWindow = elementToScroll === window;
  const scrollDirectionProp = isWindow ? 'scrollX' : 'scrollLeft';
  const elementWidthProp = isWindow ? 'innerWidth' : 'clientWidth';
  const scrollLengthProp = 'scrollWidth';
  const initialScrollPosition = elementToScroll[scrollDirectionProp];
  let totalScroll = getTotalScroll({
    isWindow,
    elementToScroll,

## getProgress.js
import EASINGS from './easings';
import getScrollTo from './bezier';

const getProgress = ({
  easingPreset,
  cubicBezierPoints,
  duration,
  runTime
}) => {
  const percentTimeElapsed = runTime / duration;

## bezier.js
const B1 = (t) => {
  return Math.pow(t, 3);
};

const B2 = (t) => {
  return 3 * t * t * (1 - t);
};

const B3 = (t) => {
  return 3 * t * Math.pow((1 - t), 2);

## scrollPositionTable.csv

          
            Time Elapsed (seconds)
             Percentage Elapsed (p)
             EaseOutQuad Output (p * (2 - p))
             Scroll Position (px)

            
              0.2
              0.2 / 2 = 0.1
              0.1 * (2 - 0.1) = 0.19
               0.19 * 200 = 38px

            
              0.4
              0.4 / 2 = 0.2
              0.2 * (2 - 0.2) = 0.36
               0.36 * 200 = 72px

            
              0.6
              0.6 / 2 = 0.3
              0.3 * (2 - 0.3) = 0.51
               0.51 * 200 = 102px

            
              0.8
              0.8 / 2 = 0.4
              0.4 * (2 - 0.4) = 0.64
               0.64 * 200 = 128px

            
              1.0
              1.0 / 2 = 0.5
              0.5 * (2 - 0.5) = 0.75
               0.75 * 200 = 150px

            
              1.2
              1.2 / 2 = 0.6
              0.6 * (2 - 0.6) = 0.84
               0.84 * 200 = 168px

            
              1.4
              1.4 / 2 = 0.7
              0.7 * (2 - 0.7) = 0.91
               0.91 * 200 = 182px

            
              1.6
              1.6 / 2 = 0.8
              0.8 * (2 - 0.8) = 0.96
               0.96 * 200 = 192px

            
              1.8
              1.8 / 2 = 0.9
              0.9 * (2 - 0.9) = 0.99
               0.99 * 200 = 198px

## easings.js
export default {
  // no easing, no acceleration
  linear(t) { return t },
  // accelerating from zero velocity
  easeInQuad(t) { return t * t },
  // decelerating to zero velocity
  easeOutQuad(t) { return t * (2 - t) },
  // acceleration until halfway, then deceleration
  easeInOutQuad(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t },
  // accelerating from zero velocity

## widthProperties.js
function smoothScroll(scrollParams) {
  const elementToScroll = scrollParams.element;
  const isWindow = elementToScroll === window;
  const scrollDirectionProp = isWindow ? 'scrollX' : 'scrollLeft';
  const elementWidthProp = isWindow ? 'innerWidth' : 'clientWidth';
  const scrollLengthProp = 'scrollWidth';
  const initialScrollPosition = elementToScroll[scrollDirectionProp];
  ...
}

## easyScroll.js
// returns the total scroll amount in pixels
const getTotalScroll = ({
  isWindow,
  elementToScroll,
  elementWidthProp,
  initialScrollPosition,
  scrollLengthProp
}) => {
  let totalScroll;