Scroll Reveal on Squarespace - Fade in Text and Images When You Scroll Down

In this Squarespace tutorial, I show you how to create fade-in scroll animations in Squarespace.

This is an awesome way to make your site a more pleasing and engaging experience for your website visitors. I highly recommend you implement this on your site and your client’s sites as well.

How to Fade in Text and Images When You Scroll Down

Custom Code:

Header Code (properties listed here are global properties):

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

Footer Code (properties listed here are unique):

<script>
  sr.reveal('#services-section .button-block, .sqs-col-4',{
    origin: 'bottom',
});
  
    sr.reveal('.sqs-col-6:nth-child(odd)',{
    origin: 'left',
});
  
      sr.reveal('.sqs-col-6:nth-child(even)',{
    origin: 'right',
});
</script>

Don’t Want to Watch the Video? Read the Post!

What's up! Chris Schwartz-Edmisten here from Schwartz-Edmisten Web Design. Today I'm going to be covering the best way to do fade-in scroll animations on Squarespace.

In this example, I have set up a fictional construction site and as I scroll down the page elements are fading into view.

Right now the go-to tutorial for this (implementing ScrollReveal on Squarespace websites) is a tutorial by Niccolò Miranda. It's a pretty good tutorial, but it doesn't go into very much depth.

So I really want to create this tutorial to be kind of the go-to guide for Scroll Reveal on Squarespace. We will cover:

  • How to implement Scroll Reveal on Squarespace

  • Best practices

  • Problems that you might run into

  • How to solve those problems

To get started, all you have to do is just drop in the Scroll Reveal script tags in the header.

I'll have those in the description, just go ahead and copy and paste it into your site.

You should now have the script source coming from unpackage.com slashscroll reveal and we're targeting at version 4.

Then in a new script tag, you should have window.sr equals ScrollReveal (this is what initializes Scroll Reveal).

scroll reveal script code Header.png

The reason we want this code in the header is because we need all of this to load before the content loads, otherwise our content isn't going to animate in properly.

Now that we have the script in the header, what we're going to do is pass the objects that we want to animate in the footer code injection area and give the instructions for each animation in that code as well.

For example:

If we have an index section with an ID of “services-section”, and we want to animate the button within that section, then we need to put the section we want to target and the class of the button in between the quotation marks.

scroll reveal Footer Injection Code - Button

If you refresh the page, you will see that the button fades in when it is scrolled into view. But it doesn’t look very exciting because that is just the default Scroll Reveal settings. There are tons of customizations you can make for really cool results.

Customizing the Scroll Reveal Animations

The default setting is fine, but we can make the animation way more interactive by defining custom properties (pictured below).

scroll reveal Footer Injection Code Animation Instructions

Below I have listed all of the properties that can be defined and customized in ScrollReveal and I just want to run through each one of them really quickly.

Origin: Where the element is going to be animated from. So you can put in a value of bottom, top, left, or right.

Distance: Distance is just the distance that the element is going to be animated from. You can put in any valid CSS distance like pixels, percentages, rems, etc. I prefer to use pixels.

Duration: The duration is just how long the animation is going to take in milliseconds. So 500 milliseconds for example, would be half a second.

Rotation: You can animate rotation - I would not recommend that you do this though as I think it would look pretty cheesy if a user is scrolling down the page and things are rotating into view. So I’m actually just going to get rid of that one, but it can be done.

Opacity: The default is 0 - the animation starts at 0 opacity. I don't know why you would need anything else but 0, so we don't really even have to worry about that one either.

Scale: The default scales in at 1. So if you want for example, your button to start small and then scale up and in (sort of for like a zooming in effect) you can set it to something lower than 1 and it will animate to 1. But I don't really want anything to be zooming in so I'm just going to delete scale as well.

Easing: You can set any valid CSS easing property or you can define a custom one here with cubic bezier, but it also will take “ease” “ease-in” “ease-out” “linear” or anything like that. I prefer to use “ease” for easing.

Mobile: This just means whether the animations will appear on mobile or not. If you set it to “true” then the animations will appear on mobile, if you set it to “false” then they won't appear on mobile. I think it's a little safer to set it to false personally, just because with mobile devices sometimes they just behave differently than on desktop. But if you really want it on Mobile I don’t think you will run into any problems.

Reset: Whether the animation is going to happen more than once. If reset is set to “false” the animation will only occur the first time that you load the page and scroll that element into view. So if you scroll out of you and into view again, you can see the animation is not repeating.

If reset is set to “true” then every time that element is scrolled into view, the animation is going to occur.

I would probably recommend keeping this at false just because if you have users scrolling down the page and tons of elements are animating into view, you don't really want to overwhelm them which it can. so I would just have them animate in the first time and then leave it at that. AKA set it to false.

View Factor: This means once 20% of the element is in view, the animation will start. If you set this to a higher value, then more of the element will have to be in the browser viewport window in order for the animation to start. So this is a cool property to be able to adjust.

View the full ScrollReveal Configuration Documentation.

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris