Squarespace image animation & hover effect
There are some cool things you can do with Squarespace image and text blocks, like creating animations and hover effects. Squarespace already has some built in capabilities to allow designers to create image animations, such as in the video below.
However, you can read on in this blog post to grab some useful CSS codes, for more of the unique animations.
9 Ways To Animate Your Squarespace Website
Squarespace Banner Image - Parallax Effect
Enabling parallax scroll is a great way of producing a really interesting banner image on the page. You can do this the following ways:
Squarespace 7.0:
Site Styles > Main: Overlay > Enable Parallax (tick)
Squarespace 7.1:
This version is even better, because now we can enable the Parallax effect for individual banner images, and not worry about it impacting site wide settings.
Go to Edit Section > Background > Image, then upload your background image.
Underneath the section where you upload your image, you will see a dropdown menu for ‘Image Effect’. Here you can select the option for Parallax.
You can even select the settings button, and change the angles and intensities of your parallax effect.
Squarespace Image Blocks
Squarespace 7.0 only:
Squarespace image blocks have plenty of animation options within the Design section.
Fade In
Slide Up
Horizontal Clip
Vertical Clip
Tilt Up
Tilt Down
Focus In
Collide
Reveal
Custom (options)
The ‘Custom’ option is pretty cool. You’re able to differentiate between the text animation and image animation. Refresh the page to see the animation example below.
Example Image Animation
You can enable image animations for specific image blocks, and individualise them across the page.
SQUARESPACE 7.1:
On your image block, got to Edit, then go to Design > Image Effect.
There are now less options to animate your images, but you can animate all the elements across your website. By going to:
Site Styles > Animations, and you can choose a style you like along with the speed at which it animates.
Unleash your Creativity; Create Animations Without Code with the Squarekicker Plugin*
If you’re looking for an easy and efficient way to create beautiful animations on your Squarespace website, look no further than the no-code design and animation extension. With this extension, you can easily add eye-catching animations to your site without any knowledge of coding.
The extension is user-friendly and intuitive, allowing you to create stunning designs in just minutes. Plus, with a variety of design options to choose from, you’ll have no trouble finding the perfect fit for your brand and website. Whether you’re looking to add a touch of personality to your homepage or bring your product pages to life, SquareKicker* lets you do it all with zero hassle.
Find out more about SquareKicker, or take out a free trial now.*
Note: you can only install this plugin on Squarespace version 7.1.
Squarespace Image Title on Hover Effect
You can create cool hover effects over the images used on your Summary Blocks. The following code will show your Summary Block data over your image, on hover.
But before you grab the code, the following video demonstrates the hover effect. Note, I use the block identifier (more information on this below), because I only want the effect applied to this specific block.
The following code will work for Squarespace 7.1, however, not with the Fluid Engine editor.
Here is the Custom CSS code for you to copy and paste:
#block-identifier {@media screen and (min-width:800px){
.summary-item {
position: relative;
img {
transition: all 2.0s ease!important;
}
.summary-content {
position: absolute;
color: #fff!important;
top: 50%;
left: 50%;
opacity: 0 !important;
pointer-events: none;
transition: all 2.0s ease;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt {
color: #fff!important;
}
}
.summary-item:hover {
img {
-webkit-filter: brightness(10%);
filter: brightness(40%);
}
.summary-content {
opacity: 1 !important;
}
}
}}To use this code, go to:
Design > Custom CSS. Copy and paste it into the Custom CSS box.
Note: You need to change your ‘#block-identifier’ (in the above code), but only if you want the code applied to a specific block. In order to get your ‘block identifier’ for the above code, you will need to get the Chrome Extension, Squarespace ID Finder. With this extension you can get the ID for any Squarespace block and section.
If you would like the hover effect applied to all Summary Blocks (site wide), you can remove the ‘#block-identifier’ from your code.
Squarespace Image Change on Hover
This is one of our personal favourites! Here is our quick demo of what the image change (or swap) on hover looks like.
The following was created on Squarespace 7.1, using the Fluid Engine editor.
Image change on hover
STEP BY STEP ON HOW TO CHANGE IMAGEs ON HOVER
step 1
To achieve this beautiful animation, the first thing you want to do, is store your selected images somewhere on your site. Create a ‘Not Linked’ page on your Squarespace website. Insert two Image Blocks and upload your chosen images into those blocks.
The video below demonstrates this.
STEP 2
The next thing you want to do is go to the page where you want your image change on hover created. Add a blank section on your page (this gives you full creative freedom!). Next:
Insert a Code Block
Paste the following HTML code into your code block:
<div class="image-swap" id="swap-one"><a href="https://example.com"><img class="top" src="INSERT IMAGE LINK ADDRESS HERE"><img class="hovered" src="INSERT IMAGE LINK ADDRESS HERE"></a></div>
STEP 3
On your image storage page, get the image link address for both of your images. To do this, right click on your images, and select ‘copy image address’ for each image. This is shown in the video below.
Replace the ‘INSERT IMAGE LINK ADDRESS HERE’ in your Code Block, by pasting both the image link addresses into the HTML code (written above). Paste the links in the order you want your images to go in the hover effect (e.g. top image / hovered image).
STEP 4
Copy and paste the following CSS into your Custom CSS section. Find this section by going to Design > Custom CSS.
//image change on hover//
.image-swap {
opacity: 1;
max-width: 400px; /* adjust widths */
height: auto; /* adjust height */
position: relative;
}
.image-swap img {
width: 100%;
transition: all 0.2s ease;
}
.hovered {
opacity: 0;
position: absolute;
left: 0;
}
.image-swap:hover .hovered {
opacity: 1;
}You can edit the max-width, height and transition in the above code, according to your own style and design.
Squarespace Page Animation
SQUARESPACE 7.1:
Note: You can implement site wide animations in Squarespace 7.1 without applying any code!
To enable this, follow these steps:
Click the option to ‘edit’ your page
Open site styles
Open Animations, and choose the animation style that you would like
Choose the speed that you would like
Go to ‘done’ and click ‘save’
Quick tip: play around with the different animation options and choose one that looks great for all of your pages and their content!
SQUARESPACE 7.0:
You can animate a page’s contents by using the following javascript.
Go to Settings > Advanced > Code Injection.
Paste this into the ‘Header’ section:
<script src="https://unpkg.com/scrollreveal@4"></script><script> window.sr = ScrollReveal();</script>
Paste this into the ‘Footer’ section:
<script> sr.reveal(‘#page-name .sqs-block-content',{ origin: 'bottom', distance: '50px', duration: 1500, easing: 'ease', mobile: true, reset: true, viewFactor: 0.4, });</script>Note: You need to change your #page-name (in the above code). To get this, go into the ‘Settings’ and find your default ‘url-slug’. However, the best way is by right clicking on your page where you want this animation, and clicking ‘inspect’.
Squarespace Video Backgrounds
You can put videos into your index page banner (or background), instead of using an image. This adds such a great effect to your website, especially when you have a fantastic video to show what your business does.
Go to ‘Banner’, and select ‘Video’. The video has to be in a YouTube or Vimeo URL.
Squarespace Gallery Autoplay
Gallery blocks allow you to be able to do several things on the design section of the block, but automatic transition between slides adds a really nice impact. Especially if you have a pretty static website.
Once you have uploaded your images into the Gallery block, click the ‘Design’ tab on the block and select ‘Automatically Transition Between Slides’. You can then select the number of seconds you want before the slide moves to the next photo.
GIF Images
Finally let us talk about the GIF images, like the ones used within this blog post.
In order to create these GIFs we used gifs , where you can choose to have a free account or a paid subscription. Of course, this depends on what features you need.
You can create a mp4 file to upload onto gifs, or use a Youtube or Vimeo URL.
Once your GIF is created, you will have a few options of how to use them. You can either use the embed link to embed into your blog posts, or download the files as an image. It's quite easy to use.
Disclaimer: This post contains affiliate links, & are marked with an asterisk (*). When you click on an affiliate link and make a purchase, we receive a small commission, & at no additional cost to you.
Free Workbook
The whole idea behind a minimalist concept is to build a site that will need less maintenance over time, and to create a more effective online tool for your business.
If you want to learn more about what it takes to build a minimalist website, hit the download button below to get the free 10-page workbook.
