Scroll effect basic

Using Intersection Observer and CSS transitions

The basic approach is as follows:

1. Use Intersection Observer to detect when elements scroll into and out of the page.
2. When an element is visible on the page add a CSS class to it.
3. Apply CSS animations, transitions and transforms to animate the elements when the appear/disappear.

Here is an element which fades in and increases in size as it appears on the screen: