Animations related to web page scrolling have been around for many years. Recently, such animations have become more common. Perhaps this is partly due to the fact that the devices used to work on the Internet have become more powerful. These devices are capable of handling and displaying more visual effects than before.

ITKarma picture

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.

ITKarma picture

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.

ITKarma picture

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.

ITKarma picture

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.

▍Smooth scrolling


Smooth scrolling is supported by browser tools when scrolling to a specific section using the window.scrollTo () in JavaScript, or even using the CSS property scroll-behavior . Currently, special JavaScript libraries are required to implement smooth scrolling with smoothing mouse wheel movements. But when using such libraries, it is necessary to ensure their normal interaction with other scrolling technologies. In addition, using smooth scrolling is not always a good idea.

General-Purpose Scrolling Technologies


There is currently no way, using only CSS, to run any general-purpose scrolling animations based on the scroll position (although there is a clause , according to which in the distant future we may have at our disposal certain animations based on general-purpose scrolling technologies). As a result, if you want to animate elements while scrolling, you need to, at a minimum, use some amount of JavaScript code to achieve the desired effect. There are two methods for using JavaScript to animate elements while scrolling. The first is to use the Intersection Observer API, the second is to handle the CDMY1CDMY event.

▍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.

▍ScrollMagic


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


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.

▍ScrollTrigger


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
Pin Elements - - - - +
Parallax Effect - - - + -
Control animation dynamics ± - - ± -
Using breakpoints ± - + - -
Dynamic batch processing of elements + - - - -
Support for horizontal scrolling effects + + + + +
Suitable for production (good browser support) ± ± ± + ±
Complete Animation Freedom - - - - -
Developer Support n/a n/a n/a n/a n/a
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.

ScrollTrigger Locomotive Scroll ScrollScene ScrollMagic
Pin Elements + ± + +
Parallax Effect + + + +
Control animation dynamics + ± ± ±
Using breakpoints + ± ± ±
Dynamic batch processing of elements + - + -
Support for horizontal scrolling effects + + + +
Suitable for production (good browser support) + ± + +
Complete Animation Freedom + ± + +
Developer Support + + + -
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 - - - -

Summary


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?

ITKarma picture.

Source