Scroll this page!

This section has code that takes the number above and does the following:

Below 0, has 0 opacity

Between 0 and 0.1, fades in and scales down from 4 to 1.

Between 0.1 and 1, has full opacity and no scaling.

Between 1 and 1.1, fades out and scales up from 1 to 4.

Above 1.1, has 0 opacity.

Keep scrolling, this section is interesting!

This section has code that takes the number above and does the following:

The background:

Below -0.3, background has 0.05 scaleX and 200px translateY.

Between -0.3 and 0, background scaleX increases to 1 and translateY decreases to 0.

Between 1 and 1.3, background scaleX decreases to 0.

The text:

Slides in when proportion is between 0 and 1, doing so even if you stop scrolling.

An animation happens because of the CSS 'transition' property.

This decouples the animation part of the transition while continuing to make display dependent on scroll position! (CSS is pretty cool!)

There's nothing fancy in this one.