How To Create an Infinitely Rotating Logo on Squarespace
If you have a circular logo then you might want to make it spin.
A rotating logo can look really effective on a Squarespace website and with just a few lines of custom code you can infinitely rotate your logo at whatever pace you want.
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Head to Website > Website Tools > Custom CSS and add the following lines of code to your custom CSS box:
.header-title-logo{
animation: rotation 5s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
What this code does is it tells Squarespace that you want your logo to rotate from 0 degrees (it’s standard position) all the way to 359 degrees, creating a full circle rotation.
It also sets the speed to 5 seconds (you can edit this to make it slower or faster) and tells Squarespace that this is an infinite rotation aka it keeps going.
To make sure your code is targeting your logo you need to hit Shift + Command + C (on a Mac), hover over your logo on the page and find the target for the logo.
Copy and paste this target before your code brackets in your custom CSS box.
Once you’re happy with how your logo rotates, hit save and you’re good to go! A quick and easy Squarespace trick using some clever lines of custom code.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
