Skip to content

Instantly share code, notes, and snippets.

Tarun Dugar tarun-dugar

View GitHub Profile
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];
...
}
@tarun-dugar
tarun-dugar / easyScroll.js
Last active May 5, 2019
Get total scroll
View easyScroll.js
// returns the total scroll amount in pixels
const getTotalScroll = ({
isWindow,
elementToScroll,
elementWidthProp,
initialScrollPosition,
scrollLengthProp
}) => {
let totalScroll;
You can’t perform that action at this time.