Syntax Error - Scroll Fade Custom CSS

Hi All,

I am trying to add Custom CSS to allow content to fade when scrolling down.

I am however given a 'Syntax Error on Line 1' (and others) message.

Please can you advise what should be changed?

Code as follows:

<style>
  .fade-out {
    opacity: 1;
    transition: opacity 0.5s ease-out;
  }

  .fade-out-scroll {
    opacity: 0;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var sections = document.querySelectorAll('.sqs-block');
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.intersectionRatio <= 0) {
          entry.target.classList.add('fade-out-scroll');
        } else {
          entry.target.classList.remove('fade-out-scroll');
        }
      });
    });

    sections.forEach(function(section) {
      observer.observe(section);
    });
  });
</script>
 

Thanks for your help

On 1/30/2023 at 9:32 PM, paul2009 said:

The code you've quoted isn't CSS. It is HTML (that contains CSS and JavaScript). It must be added in the Code Injection panel, not Custom CSS.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks a lot for your help.