Skip to content

Instantly share code, notes, and snippets.

Tarun Dugar tarun-dugar

Block or report user

Report or block tarun-dugar

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.