Scroll Reveal animation [Squarespace] 

How to fade in element on you website when you scroll down 


With these simple steps you can add a modern animation to your Squarespace website. 


Open Google Chrome or download it from the Internet: 


Download the extension for Chrome: Squarespace Collection/Block Identifier



Add Text and Images to your website. Once added, click on the newly downloaded extension icon and you will see some block names associated with each element of your landing page. 




Open at Text Editor (Atom, Brackets, etc.) and copy this block of code: 

  • <script src=""></script>
    <script type="text/javascript">
    // JavaScript = ScrollReveal();
    sr.reveal('#block-name', {duration: 1500});
    //other blocks

Instead of #block-name you will need to add the block you need to animate. 

For example I want to animate the first picture and the text immediately below, the code will become: 


  • <script src=""><</script>
  • <script type="text/javascript">
  • // JavaScript
  • window. sr = ScrollReveal ();
  • sr. reveal (' #block-ecb7bed82df5458d947a', {duration: 1600});
  •  reveal (' #block-605 and67fd8251a89a894', {duration: 1700});
  • </script>

    NOTE: To copy block-name, just click on rectangle and automatically copies to the clipboard.



Go to the end of the page and add a code block. Right here you just copy the code.