View usage.js
smoothScroll({ | |
scrollElement: window, | |
scrollAmount: 300, | |
cubicBezierPoints: { | |
x1: 0.2, | |
x2: 0.5, | |
y1: 0.5, | |
y2: 0.9 | |
}, | |
onRefUpdateCallback: (animationInstance) => { |
View 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, |
View getProgress.js
import EASINGS from './easings'; | |
import getScrollTo from './bezier'; | |
const getProgress = ({ | |
easingPreset, | |
cubicBezierPoints, | |
duration, | |
runTime | |
}) => { | |
const percentTimeElapsed = runTime / duration; |
View 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); |
View 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 |
View 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 |
View 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]; | |
... | |
} |
View easyScroll.js
// returns the total scroll amount in pixels | |
const getTotalScroll = ({ | |
isWindow, | |
elementToScroll, | |
elementWidthProp, | |
initialScrollPosition, | |
scrollLengthProp | |
}) => { | |
let totalScroll; | |