An Overview of Scroll Technologies

Web scrolling animation technology has existed for many years and has been increasingly widely used in recent years. This may be partly attributed to the improvement of device performance and the ability to better handle animation effects.

This article aims to outline various scroll-related technologies and provide tool selection guides to help you find the right solution. These technologies can be roughly divided into two categories: techniques for specific scrolling behaviors and techniques for more general scrolling behaviors .

Techniques for specific scrolling behaviors

Modern browsers support some simple native CSS scrolling effects, which in some limited use cases are enough to meet your scrolling animation needs.

position: sticky

If you just need an element on the page to stay in the same position while scrolling, using position: sticky is a good choice. It is simple and straightforward and built into a modern browser. However, IE browser and some mobile browsers require polyfill support.

CSS parallax

This is not so much a technique as a trick, but very practical for simple parallax effects, you can have different parts of the page scroll at different speeds. The biggest drawback is that it is difficult to understand what values ​​to use to set perspective and transformation to achieve accurate parallax effects.

CSS scrolling capture point

The scroll snapping point allows the browser to capture the specific scroll position you set after the user has finished scrolling normally. This helps keep certain elements visible. However, the API is still changing, so be sure to use the latest API and be careful not to rely on it in production.

Smooth scrolling

Using window.scrollTo() in JavaScript or scroll-behavior attribute in CSS, smooth scrolling is natively supported when jumping to various parts within the page. Currently, not all browsers natively support universal smooth scrolling with smooth mouse wheel operation. Various JavaScript libraries are trying to add smooth scrolling support for mouse wheel operations, but I haven't found a library that is completely bug-free and works well with all other scrolling techniques. Also, smooth scrolling itself is not always a good choice.

Techniques for universal scrolling behavior

Currently, it is impossible to create or trigger a universal animation based on scroll position using CSS alone (although there is a proposal that may support some form of universal CSS-based universal scrolling animation in the distant future), nor to erase a part of the animation. So if you want to animate elements while scrolling, you need to use at least some JavaScript to create the desired effect. There are two main ways to trigger animations when scrolling using JavaScript: using cross-viewer and using scroll events .

IntersectionObserver

Cross-observers are useful if you only need information about whether the element is visible in the viewport and how well it is visible. This makes them a good choice for revealing animations. Even so, there are some difficulties (though not impossible) using a cross-viewer, such as triggering different animations based on the direction the element enters the viewport. Cross-viewer is not very helpful either if you want to do any scrolling animation when an element is between the start and end points and does not overlap with it.

Use scrolling events

Using scroll events will give you the greatest freedom in controlling scroll animations. It allows you to influence elements when scrolling regardless of the position of the element in the viewport, and set the start and end points precisely according to your project needs.

That being said, if it is not throttling correctly and there is no convenient API to create specific behavior, it can also have a big impact on performance. This is why it is often helpful to use a good scrolling library to help you handle throttling and provide a more convenient API to use. Some libraries can even handle many resizing issues for you!

Tools for creating universal scrolling behaviors

There are some overall scrolling libraries that try to give you full control over the scrolling animation without having to perform all the calculations yourself.

ScrollMagic

ScrollMagic provides a relatively simple API to create various scrolling effects and can be linked to different animation libraries such as GSAP and Velocity.js. However, it has been less and less maintenance over the past few years, which has led to the creation of ScrollScene.

ScrollScene

ScrollScene is essentially a wrapper that tries to make ScrollMagic and/or cross-viewers easier to use. It uses a custom, maintained version of ScrollMagic and adds additional features such as video playback, scene initialization breakpoints, and scene duration breakpoints. It also uses GSAP.

ScrollTrigger

ScrollTrigger is the official GreenSock plugin for GSAP. It has a long list of features and has the easiest API to use in any scrolling library (at least for me). With it, you have full control over defining the start and end positions of scrolling animations, animate anything (WebGL, canvas, SVG, DOM, etc.) while scrolling, pin elements in place when the animation is running, and more. You can even connect it to a smooth scrolling library and they will work together perfectly. In addition, it is supported by GreenSock and GreenSock forums.

Worth mentioning: Locomotive Scroll

While it doesn't try to be a comprehensive scrolling library like the other libraries mentioned above, Locomotive Scroll focuses on providing custom smooth scrolling. You can also animate some properties of the DOM object by adding data attributes, or hooking to onscroll event to animate other types of objects.

Summarize

For certain specific scroll animation effects, such as sticky positioning and parallax, CSS technology may be sufficient, at least when using polyfill to support browsers that do not support these properties.

I usually recommend using GSAP's ScrollTrigger because it can do everything the CSS property can do, and more. ScrollTrigger will handle browser support and calculations so that you can focus on animation!

The following table lists the tools you can use to create specific effects:

(The table should be inserted here to compare different aspects of various scrolling technologies, such as performance, ease of use, functionality, etc.)

The above is the detailed content of An Overview of Scroll Technologies. For more information, please follow other related articles on the PHP Chinese website!