How to Use Squarespace Image Animations
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.
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!
This is a ‘Collide’ example
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.
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…
