View usage.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
smoothScroll({ | |
scrollElement: window, | |
scrollAmount: 300, | |
cubicBezierPoints: { | |
x1: 0.2, | |
x2: 0.5, | |
y1: 0.5, | |
y2: 0.9 | |
}, | |
onRefUpdateCallback: (animationInstance) => { |
View scrollOnEachTick.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import EASINGS from './easings'; | |
import getScrollTo from './bezier'; | |
const getProgress = ({ | |
easingPreset, | |
cubicBezierPoints, | |
duration, | |
runTime | |
}) => { | |
const percentTimeElapsed = runTime / duration; |
View bezier.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// returns the total scroll amount in pixels | |
const getTotalScroll = ({ | |
isWindow, | |
elementToScroll, | |
elementWidthProp, | |
initialScrollPosition, | |
scrollLengthProp | |
}) => { | |
let totalScroll; | |