Opacity sticky element on scroll

Please help me understand. On the page, there is a modal window that opens when you click on a link (it’s a hidden DIV). This window has a scroll feature (it’s taller than 100vh) with fixed elements.

I want the “Cover Image” to darken when the next block is overlaid during scrolling. I’ve tried applying a DIV on top of the image and animating the opacity from 0 to 100%. I’ve also tried simply fading the image to 0%.

My problem is that I can’t achieve a smooth darkening effect on the image as I scroll.

I understand how to create this animation if I apply it to “While page is scrolling” (assuming the content is on the actual page) by setting percentages based on the page and achieving a smooth darkening effect. However, in this case, the situation is different because it’s an element (the DIV that appears when clicked). When I apply the “While scrolling in view” animation to either the element (the image) or the DIV (containing all the content), I can’t achieve a smooth darkening effect.

Here is my public share link: [LINK]1
(how to access public share link)

Can you share your read-only link?