In the context of our problem, the timing function will take the ratio of the time elapsed and the total duration of the animation as input. So, we’ll have to wire that up ourselves! Unfortunately, there is no out-of-the-box way to define the animation of a scroll. You can read in depth about timing functions here. Under the hood, both of these methods use the concept of timing functions.Ī timing function is a function of time and defines the variation of speed of an animation over a given duration, that is, its acceleration. easing presets ( ease-in, ease-out, ease-in-out etc.).In CSS, we have the provision of defining the animations of some properties like background-color and opacity through:

animation parameters specified, which will dictate the pace of the scrolling.This will depend on two interdependent factors: On each tick, that is, each invocation of the callback function, the function will calculate the amount that needs to be scrolled. requestAnimationFrame is a non-blocking way to call a function that performs an animation just before each repaint cycle of the browser. A continuously self-executing function is provided to requestAnimationFrame as a callback. Now, we need to start scrolling the element at a pace based on the duration provided in the parameters. function smoothScroll(scrollParams = īased on the type of element, we use appropriate properties, as seen below. The library will expose a function that will accept the different input parameters required like the element to scroll, the scroll amount, etc. callback to cancel the scrolling event at any point.specify the duration over which the scroll will happen.ability to scroll inside any element and not just window.animations with cubic Bézier curves and easing presets - the most interesting part!.Today, we will explore how smooth scrolling works on the web by building a smooth scrolling library from scratch that will have the following features: Photo by Damon Lam on Unsplash (it’s a scroll.

Smoothscroll website