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;
	smoothScroll({
	scrollElement: window,
	scrollAmount: 300,
	cubicBezierPoints: {
	x1: 0.2,
	x2: 0.5,
	y1: 0.5,
	y2: 0.9
	},
	onRefUpdateCallback: (animationInstance) => {
	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,
	import EASINGS from './easings';
	import getScrollTo from './bezier';

	const getProgress = ({
	easingPreset,
	cubicBezierPoints,
	duration,
	runTime
	}) => {
	const percentTimeElapsed = runTime / duration;
	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);
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
	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
	// returns the total scroll amount in pixels
	const getTotalScroll = ({
	isWindow,
	elementToScroll,
	elementWidthProp,
	initialScrollPosition,
	scrollLengthProp
	}) => {
	let totalScroll;