[ad_1]
On the home page on my website, I am trying to replicate the style on the home page of this website: [https://www.heavenlybeds.co.uk/](https://www.heavenlybeds.co.uk/)
I’ve used custom CSS to get the style that I want, but am running into a roadblock – The fade-in effects seem to be applying before I scroll onto the relevant section. I tried to apply this functionality with custom Javascript
The JS code can be found [here](https://pastebin.com/MqCtbZdW). Using Elementor I set it to appear at <head>, only on the home page.
Here is the CSS I am using, there don’t seem to be any issues with it: [https://pastebin.com/nY1hAjG4](https://pastebin.com/nY1hAjG4)
Site URL: [https://mariamfashion.uk/](https://mariamfashion.uk/)
[ad_2]
In the observerOptions, try changing the “root” option from:
null
to:
document.getElementById(“home_products_archive_1”)
The “root” is the element that is used to test for intersection and by leaving it as null, the IntersectionObserver will use the document’s viewport to test for intersection, which means it will be triggered as soon as the page is loaded. So you want to change the “root” to the parent element that contains the elements you are trying to fade-in. You’ll need to set up observers for each section of elements you want to fade in, otherwise they will all fade-in at the same time when the “root” is intersected.