After using code injection for scroll reveal I can no longer edit pages

Site URL: https://breakthroughhc.ca

Hey folks,

I find myself in a bit of a bind after using code injection to achieve the scroll reveal effect I am after. Using the squarespace sitewide animation I was getting a "double loading" type effect that I didn't like. I'll post the code I used below, I've put it in the header. Unfortunately, since I've put it in I've been unable to use the usual editing tools. When I click edit on one of my pages the background, header, and footer show up but none of the content blocks on the page. So far I've just been deleting the code, editing, then redoing the code once I'm finished. Needless to say, that strategy is getting pretty old. Any suggestions on where I've gone wrong or how to resolve this? Thanks!

<script src="https://unpkg.com/scrollreveal@4"></script>
<script>
  window.sr = ScrollReveal({
    distance: '50px',
    duration: 1000,
    easing: 'ease',
    mobile: true,
    reset: viewFactor0.3</script>

<style>
    html.sr body: not(.sqs-edit-mode) .sqs-block { 
      visibility: hidden;
  }
</style>

2 minutes ago, kylenorquay said:

Site URL: https://breakthroughhc.ca

Hey folks,

I find myself in a bit of a bind after using code injection to achieve the scroll reveal effect I am after. Using the squarespace sitewide animation I was getting a "double loading" type effect that I didn't like. I'll post the code I used below, I've put it in the header. Unfortunately, since I've put it in I've been unable to use the usual editing tools. When I click edit on one of my pages the background, header, and footer show up but none of the content blocks on the page. So far I've just been deleting the code, editing, then redoing the code once I'm finished. Needless to say, that strategy is getting pretty old. Any suggestions on where I've gone wrong or how to resolve this? Thanks!

<script src="https://unpkg.com/scrollreveal@4"></script>
<script>
  window.sr = ScrollReveal({
    distance: '50px',
    duration: 1000,
    easing: 'ease',
    mobile: true,
    reset: viewFactor0.3</script>

 

 

I should also mention I have the following code in the footer:

<script>
  sr.reveal('.sqs-block',{
    origin: 'bottom',
});
</script>

I figured it out! Answering my own question to hopefully help others finding the same trouble. All that is required is placing 

body: not(.sqs-edit-mode)

before each element. So in my case,

<style>
    html.sr body: not(.sqs-edit-mode) .sqs-block { 
      visibility: hidden;
  }
</style>

Hope this helps someone out there!