7 Step Guide to the Squarespace Sitewide Animation Feature
Introduction
Looking for a simple way to add dynamism to your Squarespace website? Maybe the Squarespace sitewide animation feature is your answer. When you add strategic animation to your website, you engage site visitors, your website is more interactive, and your website has more aesthetic appeal. Squarespace makes sitewide animation easy. Just follow these easy steps to animate your website.
KEY TAKEAWAYS:
The Squarespace sitewide animation feature is a simple way to add stunning design nuances to an entire website in just a few clicks.
In just seven easy steps, you can transform your website and give your site visitors a different scrolling experience.
Log into your website.
Select the paintbrush that represents the globals styles editor.
Go to the “Miscellaneous” option.
Select “Animations.”
Choose your desired the “Animations” style.
Choose the animation speed that best suits your website.
Save!
Steps for Implementing the Squarespace Sitewide Animation Feature
Step 1: LOG INTO YOUR SQUARESPACE ACCOUNT AND LOCATE THE WEBSITE.
From your Squarespace dashboard, navigate to the website you want to animate.
Step 2: SELECT THE SITE EDITOR.
Once you've opened the desired website, click on the global site styles editor icon (a paintbrush) on the top right of the website.
Click on the paintbrush icon on your website to access the Squarespace sitewide animation feature.
Step 3: SCROLL DOWN TO “MISCELLANEOUS.”
Scroll down past the editing options for font, colors, buttons, and forms. The last option is labeled “Miscellaneous.” Click on “Accessories.”
Select “Miscellaneous” at the bottom of Squarespace’s sitewide design options.
Step 4: SELECT “ANIMATIONS.”
Squarespace provides three “Miscellaneous” options. Select the first one for the sitewide animation feature: “Animations.”
Select the top option for the “Miscellaneous” sitewide design features in Squarespace.
Step 5: CHOOSE YOUR DESIRED ANIMATION STYLE.
Review the five options for the Squarespace sitewide animation feature:
Fade
Scale (This is the animation I selected for dianegreendesign.com.)
Slide
Clip
Flex
Select the Squarespace sitewide animation feature that provides the effect you want to add to your website based on your website design.
I used the “Scale” option for my website. I love the way it gently brings images into focus as my site visitors scroll my pages.
Step 6: SELECT YOUR DESIRED ANIMATION SPEED
Squarespace offers three animation speeds. Select the speed that works best for your website and your selected animation style. Squarespace offers three speeds:
Slow
Medium
Fast
With Squarespace animation, you get three speed options: slow, medium, and fast. Try each of them. Different design styles will call for different animation speeds. For Diane Green Design, I use the “Medium” speed.
Step 7: SAVE YOUR NEW ANIMATION
Save your global animation by clicking “Save” on the top left of your website.
Summary
With these six easy steps, you can add visual appeal to your Squarespace website and make it more engaging and interactive for your website visitors. Subtle animations can move your website from good to WOW! For more granular details about the Squarespace sitewide animation feature, visit Squarespace’s animation tutorial.
Do you need help with a new or existing website? I’d love to help! Just drop me a line.
