Glitchy on scroll interaction

Hello all,

I am creating an animated hero section for a church’s website.

This mainly involves raising and lower the opacity of different elements as you scroll down thru the first div. As you can see it starts with an image of a camera lens, zooms “inside” the lens, and then 3 different images and titles will sequentially fade in.

Within the interaction live preview mode, everything is smooth, but on the live site it is super buggy. I assume the way I structured the elements and created the interaction is not ideal. Can someone help point me in a better direction to build this in a cleaner way that won’t be buggy?

Any help is much appreciated.

Be Blessed,

Mitch


Here is my public share link: https://preview.webflow.com/preview/sje2?utm_medium=preview_link&utm_source=designer&utm_content=sje2&preview=7b38294ad18e9ea6b95eed9d21ec1d6b&workflow=preview
(how to access public share link)