Untitled

 avatar
unknown
javascript
2 years ago
2.5 kB
16
Indexable
// ====================== YOU CAN IGNORE THIS ==============
// =========================================================
// Easing function for smooth scrolling (quadratic)
Math.easeInOutQuad = function (t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
};

// Smooth Scroll
function smoothScroll(targetY, duration, easingFunction) {
  const startingY = window.pageYOffset;
  let startTime = null;

  function scrollStep(timestamp) {
    if (!startTime) startTime = timestamp;

    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);

    const ease = easingFunction(progress);
    window.scrollTo(0, startingY + (targetY - startingY) * ease);

    if (progress < 1) {
      requestAnimationFrame(scrollStep);
    }
  }

  requestAnimationFrame(scrollStep);
}

// Example usage with easeInOutQuad
const easeInOutQuad = t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;

// =====================================================================
// ============= THIS IS WHERE YOU START LOOKING =======================

function performScrolls() {
    // Scroll 300 pixels down smoothly with cubic bezier easing in 1000 milliseconds (1 second)
    smoothScroll(window.pageYOffset + 200, 1000, easeInOutQuad);

    setTimeout(() => {
        smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
        setTimeout(() => {
            smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
            setTimeout(() => {
                smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
                setTimeout(() => {
                    smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
                    setTimeout(() => {
                        smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);
                        // add another 
                        /*
                        setTimeout(() => {
                            smoothScroll(window.pageYOffset + 200, 800, easeInOutQuad);

                        }, 2000);
                        after smoothscroll */
                    }, 2000); // ...
                }, 2000); // ...
            }, 2000); // you get the picture
        }, 2000); // between 2nd and 3rd
    }, 2000); // between 1st and 2nd
}

setTimeout(() => {
// Start the sequence of scrolls
performScrolls();
}, 10000); // delay after launch, to let you start recording, minimize console and etc.
Editor is loading...
Leave a Comment