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.