Changing the opacity of an element on a scroll gap - how to do it?

Question

JavaScript

There are a lot of elements on the page that need to appear (by changing the opacity) when scrolling through a certain gap.

On the example of one element:
There is a lower border when the element is completely transparent - 900px
There is an upper border when the elements are completely opaque - 1100px
Both numbers are not static, of course, their value depends on the height of the screen and position on the page, but there was nothing complicated for calculation.
And in this interval, when scrolling, the element must either appear or disappear, depending on the direction of the scroll.

I have already broken my head over the formula, but I can’t get it out, although everything seems to be quite simple - all the data is there, you just need to use it correctly.

How to solve this "problem"?

Answer 1

The distance between the maximum and minimum height is taken as 100%. When scrolling, we look at how many people have gone from the minimum to the maximum as a percentage and set the same amount in the opacity value, but do not forget that opacity takes a value from 0 to 1.

Answer 2

Use ScollMagic and gsap
Here's a demo: scrollmagic.io/examples/basic/simple_tweening.html
Here's what I got: https://codepen.io/corvus-007/pen/JmOorX