Scrolling Technology Overview
There are many technologies related to scrolling. The purpose of this article is to provide an overview of such technologies and tools that will help you select and create what you need in each specific situation. I would divide scrolling technologies into two broad categories. The first includes technologies for implementing specific scrolling mechanisms, the second includes general-purpose scrolling technologies.
Technologies for implementing specific scrolling mechanisms
CSS has a few simple standard scrolling effects supported by modern browsers. In some cases, their use may be sufficient to meet the special needs of a project.
▍CSS property of position: sticky
If you need to prevent some element from scrolling along with the rest of the page content, then when styling this element, it is enough to apply the CDMY0CDMY property. This is a simple and understandable trick; its support is built into modern browsers. But in order for this to work in IE and in some mobile browsers, you will need a polyfill. If you are interested in this topic, take a look at the given material.
The blue element “rests” on the top of the container and does not scroll with the rest of the elements
Here is a demonstration of such scrolling.
▍ Parallax Effect
The parallax effect is rather not a special technology, but a special technical technique. But be that as it may, this effect can be very useful in cases where it is necessary that when scrolling different parts of the page would move at different speeds. This technique is well described in the this article. There are many examples of its implementation. For example, this . For me, the main disadvantage of this technique is that it is difficult to understand which values that give the correct parallax effect should be used to set perspectives and transformations.
Parallax effect: elements move at different speeds.
Here demonstrates the parallax effect.
▍ Scroll to specific points
Using scrolling with anchor points allows the browser to automatically adjust the position of elements by moving them to a specific position after the user has completed the normal scrolling operation. This can be useful in cases where it is necessary that after completing the scrolling a certain element would be entirely in the user's field of vision. However, the corresponding API is still unstable , so try to use the latest implementations of it and be wary of applying this approach to scrolling in production. Here is a good article on this subject.
If the user scrolls the item beyond the top border of the container, the browser will automatically change the position of the element so that it is visible in full
Here demonstrates how scrolling works with anchor points.
General-Purpose Scrolling Technologies
▍Using the Intersection Observer API
API IntersectionObserver allows you to successfully solve various tasks related to scrolling, in the event that all that is needed to start the animation is knowing whether the element is visible in the viewing area, as well as which part of the element is visible. This makes the IntersectionObserver API a great tool to run animations that accompany an element appearing on the screen. But, even so, some effects are very difficult (although possible) to implement using this API. For example, this is the launch of different animations depending on the direction of movement of the element. This API, in addition, is not particularly useful in situations where when scrolling you need to start the animation when the element is somewhere in the middle of the viewport, that is, it does not appear in the viewport and does not disappear from it.
▍Using the scroll event
Before anyone who uses the CDMY2CDMY event to implement animation while scrolling, very great opportunities open up. This technique allows, when scrolling, to act on the element at any position of the element relative to the borders of the viewing area. Using the CDMY3CDMY event, you can very accurately, in accordance with the needs of the project, set the position of the beginning and end of the animation.
Given this, it should be noted that this approach to scrolling animation can create a considerable load on the system. This happens if the developer does not care about performance and does not limit the frequency of processing the CDMY4CDMY event. In addition, the programmer who decides to use the CDMY5CDMY event will not have a convenient API to implement various scrolling scripts. That is why often, instead of implementing the CDMY6CDMY event processing mechanisms on their own, it makes sense to use a specialized library, the authors of which have already taken care of the performance impact of the CDMY7CDMY event and the API.Some of these libraries are even able to help the developer in case of problems with element sizes
Tools for creating general-purpose scrolling mechanisms
There are several powerful scrolling libraries that are designed to give the developer full control over the animations that are performed when scrolling pages, as well as to make life easier for the developer, without forcing him to do complex calculations on his own.
The ScrollMagic library gives us a relatively simple API that allows us to create various effects when scrolling. This library can work in conjunction with various animation libraries, such as GSAP and Velocity. js . True, in the last few years this library is not well supported. This led to the creation of the ScrollScene library.
ScrollScene is, in essence, a wrapper that aims to increase the usability of the ScrollMagic library and/or the IntersectionObserver API. It uses its own version of ScrollMagic, which has better support than the regular version of the library. There are additional features like playing video and supporting breakpoints that affect the animation. This library also uses GSAP.
The ScrollTrigger library is the official GreenSock plugin for GSAP. This library is distinguished by a large set of features, its API seems to me the simplest of the existing library libraries for scrolling. Using this library, you have full control over exactly where the scrolling animation starts and ends, you can animate anything you like while scrolling (WebGL, canvas, SVG, DOM), you can pin elements for the duration of the animation. The capabilities of this library are not limited to this. In addition, this library is supported by GreenSock, you can get help using it in the forums GreenSock.
▍Library worth mentioning: Locomotive Scroll
The Locomotive Scroll library does not strive to realize the same wide range of features as other libraries that we talked about. Its main goal is the implementation of smooth scrolling. Using it, in addition, you can animate some properties of DOM objects using the CDMY8CDMY attributes, or use the CDMY9CDMY handler to animate objects of other types.
Comparison of technologies and tools
Here is a comparison of scrolling technologies.
|Intersection Observer API||Smooth scrolling||CSS anchor points||CSS parallax effect||CSS property of position: sticky|
|Control animation dynamics||±||-||-||±||-|
|Dynamic batch processing of elements||+||-||-||-||-|
|Support for horizontal scrolling effects||+||+||+||+||+|
|Suitable for production (good browser support)||±||±||±||+||±|
|Complete Animation Freedom||-||-||-||-||-|
|Work with DOM, Canvas, WebGl, SVG||+||-||-||-||-|
|Support for resizing elements||+||+||+||+||+|
|Limits the animation to only the relevant section||+||+||+||-||+|
|Distinguishes scrolling directions||±||-||-||-||-|
|Technology embedded in the browser||+||+||+||+||+|
Here is a comparison of the reviewed libraries.
|Control animation dynamics||+||±||±||±|
|Dynamic batch processing of elements||+||-||+||-|
|Support for horizontal scrolling effects||+||+||+||+|
|Suitable for production (good browser support)||+||±||+||+|
|Complete Animation Freedom||+||±||+||+|
|Works with DOM, Canvas, WebGl, SVG||+||±||+||+|
|Support for resizing elements||+||+||+||±|
|Limits the animation to only the relevant section||+||-||±||±|
|Distinguishes scrolling directions||+||±||+||+|
|Technology embedded in the browser||-||-||-||-|
To implement some special scrolling mechanisms, such as pinning elements and the parallax effect, standard CSS capabilities may be sufficient. At least that’s true if you use polyfills for browsers that don’t support the corresponding CSS features.
I usually recommend using the ScrollTrigger library to configure scrolling. It allows you to achieve everything that pure CSS is capable of, as well as much more. This library takes care of the browser support of certain technologies, facilitates the execution of calculations, which allows those who use it to simply go about their business.
What technologies do you use when setting up scrolling in your projects?