Jump to content

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

Recommended Posts

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>

 

 

Link to comment
  • Replies 2
  • Views 264
  • Created
  • Last Reply
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>

Link to comment

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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.