How to animate image blocks in Squarespace
Having moving elements throughout your website can really bring some life to your design.
Animations are not only super trendy right now, but they also grab visitors' attention much more than regular, static images do.
Today I'm going to show you a couple of different ways to easily add some movement to your Squarespace website images - and there's no coding involved (woohoo!).
1 - Animating individual images
You can add an animation to each individual image block on your website. This animation will display as the image loads/appears for the first time.
I love this feature because, although it takes some time to go through all of the images on your site and add an animation, you have so much control over exactly how each image moves, and you can create some awesome stuff by mixing and matching different animation styles throughout your site.
On your page, add an Image Block
Upload your image
Navigate to DESIGN at the top
Click Animations
Experiment with all of the different animation options! When you click on one, you'll see a preview of your image animating.
2 - Animating ALL of your site images (and more)
In Squarespace 7.1, they've taken this animation feature to the next level. Sorry Squarespace 7.0 users, this one isn't for you. (Not sure which Squarespace version you're using? Read this!)
You can choose an animation to display sitewide.
This is cool because it does A LOT of animating work with just the click of a button. But because this animates EVERY image and block on your site, not just your standard image blocks, it can be quite a lot of animation all at once. Test it out for yourself and see if you like it!
In Squarespace 7.1, head to Design > Site Styles
Click Animations
Choose from the list of animations! When you click on one, it will preview how it will look around your site. It will become more obvious as you scroll down your site as the animation is visible when the blocks and sections are loading/coming into view.
Hit Done > Save at the top left when you're done.
3 - Add images as GIFs
If you're not much into design, you probably think of GIFs as those funny little video stickers on Instagram or a classic animated meme...
Although they're animated, GIFs are actually a type of image, which means that you can upload them into any areas that you can add images around your Squarespace site! This opens up a lot of opportunities for animated images.
Aside from the obvious (adding silly GIF memes to your blog posts), you can really do SO much with GIFs in terms of bringing some life to your site!
PS - if you do want to add silly GIF memes to your site, we recommend giphy.com!
So how do you create a GIF?
If you're not a designer pro, you might be wondering how the heck you're supposed to create one of these GIFs. Here are two DIY friendly options:
Canva!
Boy oh boy do we love Canva. You can easily create videos in Canva, but you can create GIFs too.
Create a new (video) design in Canva
Each different page in your design will be a frame of your animation
For each page, you can set the time of the page
Once you've designed all of your frames, you can download your file as a GIF then upload it anywhere on your Squarespace site as an image.
This method is best for simple animations like an image gallery or a small element with a simple movement.
This method won't work if you're wanting to create a video-style meme GIF.
Tip: There are actually already lots of animated elements within Canva (free and paid), so you can use these pre-made elements and download them as GIFs, too, to add around your site!
Online converters
If you want to create more of a meme style/video GIF, you'll need to have a video clip file first.
Then, you can use an online converter to convert it to a GIF using something like ezigif.com
That's it! Three ways to add animations to your images within Squarespace. We hope you give them a go!
If you want to add some more movement to your site, make sure to check out our post about adding Parallax Scrolling and other animations to section backgrounds!
If you liked this post, Pin it to Pinterest! 👇🏻
