Custom scroll animation: Adding a class when object is visible

I created a white background for a title on a block by custom css. I would like to create a fade in effect when the user scrolls and the block becomes visible. I want to add classes dynamically and do the rest in custom css.

My first step worked: With code injection I can add a class .preFade to my block:

window.onload = function myFunction() {
  var element = document.getElementById("block-85f05db57d57001f69ee");
  element.classList.add("preFade");
}

My second step failed: I wanted user Intersection Observer to add another class .fadeIn when the block becomes visible:

const appear = document.querySelector('.preFade'); 
const cb = function(entries){
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('fadeIn');
    }else{
      entry.target.classList.remove('fadeIn');
    }
  });
}
const io = new IntersectionObserver(cb);
io.observe(appear);

 My JS skills are pretty poor, so any help is greatly appreciated.

21 hours ago, sitepositive said:

I created a white background for a title on a block by custom css. I would like to create a fade in effect when the user scrolls and the block becomes visible. I want to add classes dynamically and do the rest in custom css.

My first step worked: With code injection I can add a class .preFade to my block:

window.onload = function myFunction() {
  var element = document.getElementById("block-85f05db57d57001f69ee");
  element.classList.add("preFade");
}

My second step failed: I wanted user Intersection Observer to add another class .fadeIn when the block becomes visible:

const appear = document.querySelector('.preFade'); 
const cb = function(entries){
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('fadeIn');
    }else{
      entry.target.classList.remove('fadeIn');
    }
  });
}
const io = new IntersectionObserver(cb);
io.observe(appear);

 My JS skills are pretty poor, so any help is greatly appreciated.

Try the following one

<script>
	(function(){
    document.addEventListener('DOMContentLoaded',()=>{
        const element = document.getElementById("block-85f05db57d57001f69ee");
        element.classList.add("preFade");
        let observer = new IntersectionObserver((entries, observer) => { 
            entries.forEach(entry => {
            if(entry.isIntersecting) {
                entry.target.classList.add("fadeIn");
            } else entry.target.classList.remove("fadeIn");
            });
        }, {
            threshold: 1
        });
        
        observer.observe(element);
    });
})()
</script>

If it can not be implemented, kindly share your site with the protected password so we can take a look more detail

Hope it can help you

Many thanks for your suggestion. Unfortunately, there is still a problem with adding the second class.

Here is the url:

https://clavichord-garlic-a66t.squarespace.com

password: sitepositive

44 minutes ago, sitepositive said:

Many thanks for your suggestion. Unfortunately, there is still a problem with adding the second class.

Here is the url:

https://clavichord-garlic-a66t.squarespace.com

password: sitepositive

 

I've just updated the previous code. Try it again and check if it works properly on your site.

My testing result

Thanks Ba Ngan! This works really well.

I made a tiny change in the else clause because I wanted the block to remain visible when the user scrolls past. Now it does exactly what I intended, many thanks for your help!