How to Use Squarespace Image Animations

header.jpg

Recently, Squarespace integrated a few new features for their users, and if you weren’t paying attention you may have missed one of our absolute favorites.

One of the coolest new features that you should know about is image animations. Think of it like Powerpoint slide transitions but more professional (and waaay cooler than Powerpoint, obvs).

You’ve probably noticed some cool animation image effects showing up on some of your favorite websites in recent years, but it was usually reserved for large companies with a big web design budget.

Luckily what used to require a lot of custom coding can now be easily implemented into your Squarespace website design with just a few clicks using their free built in tools!

How to Use Image Animations for Your Website

This feature can be applied to any image block within your website, like blog content, home page features, etc.

To add a new image to your site using this feature, add an image block and upload an image to your desired placement.

image-animation.gif

Select the Animations tab within the Image settings window. From here you can select from the various styles of animation:

  • Fade In - your image block and text fades in

  • Slide up - image block and text slides upward on the page

  • Slide down - image block and text slides downward on the page

  • Horizontal clip - image block loads onto the page through horizontal layers

  • Vertical clip - image block loads onto the page through vertical layers

  • Tilt up - block appears on page with an upward tilt

  • Tilt down - block appears on page with a downward tilt

  • Focus In - block comes into focus

  • Collide - image and text come together from the sides

  • Reveal - image and text move outward from one another

  • Slide from left - block comes in from the left of the page

  • Slide from right - block comes in from the right of the page

  • Custom - you can create your own combination of how you want your image and text to be revealed

After you have selected your favorite animation, select apply. Your image should be good to go! Hit save and refresh your page to see your animation in action.

See below for a few examples of the different animations on a live webpage. You may need to refresh your page!

How to use Squarespace image animations-1.jpeg
How to use Squarespace image animations-2.jpeg

This is a ‘Collide’ example

How to use Squarespace image animations.jpeg

Quick Tips about Image Animations

Be careful about mixing in too many animation styles on one page! You do not want to overwhelm your website visitors and turn them away from a site that feels too “busy”. Just use them to add visual interest to your site in small doses. Be strategic with your placement and how many you use, and be careful not to overdo it!

As with any animation or moving elements on your website, subtlety is key.

Website Strategy Guide

Want to Build an Irresistible & Profitable Website?

Grab our 7 steps to launching a seriously legit online presence that engages + converts!

With a basic understanding of this great new Squarespace feature, you can easily give your website a subtle touch of dynamic flair, perfect for woo-ing your website visitors.

We want to know, which animation style are you using on your site? Let us know in the comments below!

You might also like…