How to create a simple fade in animation

You know when you load your Squarespace site and you can see some of the blocks rearranging their content for a few seconds before everything snaps into place?

If you have ever worked with a summary block set to carousel before, for example to display testimonials, you’ve most likely seen what I’m talking about:

It’s that few seconds glitch where you can see three testimonials side-by-side before it displays just one, like you’ve selected inside the block’s settings.

You can usually see this if that carousel block is near the start of the page, since all the content needs to load after you’ve entered the url.

If this is something that bugs you and you’d like to make it load nicer, then keep reading!

We’re going to be adding a super simple fade in animation so we hide the whole block for a few seconds, to let it get ready, before making it show up smoothly.

Now, keep in mind this quick fix DOESN’T apply the effect as elements pop into the visible area of the screen – it will apply it to all elements you indicate in the code, but you’ll only see the fading for the blocks that are visible as soon as the page loads.

Alright, with that out the way, let’s do this!

Making a Squarespace block fade in on page load

This effect is achieved with two very simple pieces of code.

We have to set the initial state for the blocks we want to hide, and then through the animation property we have to indicate what’s going to happen and during how much time.

Since I’ve been talking about the summary carousel block, that’s the block we’ll be working with to achieve this fading effect.

First, we need to look for the class (or ID if you want to target just one) of the block we want to fade in.

Alright, the summary block carousel (like most blocks in Squarespace) has lots of containers or wrappers, so I’m looking for the one that holds all the content inside it, yet it provides a class that we can use to make it clear we’re talking about the carousels, not any other summary block.

The container I’ve highlighted above meets both expectations.

Amongst all its classes, it has one called .sqs-gallery-design-carousel we can use.

I’ll pop that into my Custom CSS window.

.sqs-gallery-design-carousel {

}

Great, next we have to set the initial settings we want our block to have.

Since we don’t want it to be visible, we could either set its visibility property to hidden or its opacity to 0.

I’m going to go with opacity.

.sqs-gallery-design-carousel {
  opacity: 0;
}

Cool!

Let’s move onto our fading effect or animation.

To use the animation property, we have to first indicate the “steps” that our animation will run through to give us our desired effect.

These steps are set up under something called @keyframes, where you can indicate what’s going to change for our chosen element from start to finish throughout the animation.

I don’t want to get into too much detail here, so if you’re interested in learning about CSS animations in depth I HIGHLY recommend checking out the amazing content and course by Donovan from CSS Animation Rocks.

So, we need to create our keyframes and give them a name.

This name is going to be the name of our animation. I’ll name mine fadeMe:

@keyframes fadeMe {

}

Awesome!

Now, for this particular animation we’re building, we already gave the initial state to our element – the carousel block – by making it invisible with an opacity: 0.

This means that the next (and final) step we want to get to is when our block is fully visible, meaning when it gets to opacity: 1.

Therefore, our keyframes would simply be:

@keyframes fadeMe {
  to {
    opacity: 1;
  }
}

Note: the to is to indicate where the animation is headed (from the initial state of 0 opacity to a full opacity). You could also replace to for 100%

With our steps ready to go, all that’s left is to set up the animation property for our block.

The animation property is a shorthand that can group many parameters, however we’ll be focusing on just a couple:

• the name of the animation,

• its duration (aka how much time it should take to get to full opacity),

• a delay (to start the animation a bit after the element starts loading to keep it hidden in the meantime),

• and its direction (to make sure it doesn’t go back to its initial state and becomes invisible again).

I’ll be using 1s for the total duration of the animation and set a 1.5s delay to give time for the block to load before showing it.

This, in CSS, translates to:

.sqs-gallery-design-carousel {
  opacity: 0;
  animation: fadeMe 1s 1.5s forwards;
}

Did you see that? Or rather, did you NOT see it? (… get it?)
Our carousel block now fades in like a pro and we can’t see the flashing of its content before it’s neatly organized.

I encourage you to play with the different animation parameters (remove the direction, alter the times) to get a better sense of how it works.

And also, why not try it out with other blocks?

All you’d need to do is use the corresponding class or ID of the new block you want to fade in.

The keyframes are global, so they’re not attached to any particular element. You just have to use the same animation name when giving the animation property to the new block!

Until next time,

B.