30+ Squarespace animations to make your website extraordinary

With a growing number of websites, it's becoming increasingly difficult to stand out. Fortunately, you lot don't demand to exist a professional animator to add engaging and centre-catching animations to Squarespace. In this article, nosotros'll go through the all-time Squarespace animations and how to add together them to your Squarespace 7.1 website. Nearly are added in under a minute!

Hover Animations on Buttons

Adding hover animations to buttons is a great first step. It will increase conversion, and make the overall impression of your Squarespace site much amend. Select between five stunning hover furnishings.

Click hither to add animated buttons to your website.

Breathing on Scroll (Parallax Effect)

With this animate on scroll effect, groundwork images will animate when the visitor scrolls in Squarespace. Just like a parallax effect! There are a total of 7 Squarespace animations to choose from, so you tin can select the one that looks all-time on your website.

To add the animate on scroll result to your Squarespace site, click Edit and then the pencil icon on the section that you want to alter. In the popup, become to Background and lastly Prototype Effects .

Squarespace Groundwork Art

Animated groundwork art is another impressive feature congenital into Squarespace, that tin can make any tiresome website more interesting. Select betwixt half-dozen different animated effects.

To add background art to your Squarespace site, click Edit and and so click on the pencil icon on the section that you want to change. In the popup, go to Groundwork > Art .

Animated Social Icons

Squarespace has a library of social icons that can be blithe with the Spark Plugin. Making them animate is as unproblematic as clicking a button. Here's a live demo of the animated social icons.

Hither's how to add blithe social icons:

  1. Add a new "Social Links" block to your Squarespace site.

  2. Open Spark Plugin and click "Boosted Social Links". If you don't have Spark Plugin, you tin get Spark Plugin.

Animated Slope Background

Ever seen an animated gradient? Information technology is like a gradient on steroids, that looks stunning. Works smashing on call to activeness'due south as information technology draws a lot of attention. Use your site colors to brand information technology look even better.

Click hither to add animated gradient backgrounds to your site.

Blithe Headings

Like gradients as much as I exercise? And so you'll love this gradient blithe heading. Here's a live demo of it.

Blithe gif

Adding an animated gif to Squarespace is another simple way to get animations on your website. If y'all don't accept a video or gif, yous tin head over to Giphy, which has the world'southward largest library of animated gifs.

If you have a video, on the other paw, in that location are 2 options: Either catechumen the video to a gif with a tool like ezgif or loop the video. I would recommend looping the video, every bit it has the same backdrop every bit a gif, simply with much higher quality. As an case, the videos in this article are using the looping method.

How to loop videos like animated gifs

  1. Go to Design > Custom CSS > Manage Custom Files and upload your video.

  2. Click inside the CSS editor, then Manage Custom Files once again, and click the video. A URL to the video will appear. Re-create it.

  3. Finally, add a code cake to your site and paste the below lawmaking. Be certain to replace URL-Hither with your URL. Now you lot have a high-quality blithe gif!

<video src="URL-HERE" autoplay muted playsinline loop width="100%" type="video/mp4"></video>

Animated Groundwork Epitome

Bring your Squarespace website to life with this blithe background effect. A elementary, yet powerful, style to give your visitors a good impression.

Click here to add this result to your site.

Video Groundwork

Video backgrounds are sometimes forgotten when speaking most Squarespace animations, merely they are simply as effective. Works bully equally a video imprint for homepages.

To add together a video groundwork to your Squarespace site, click Edit and and so click on the pencil icon on the department that you want to change. In the popup, go to Groundwork > Video .

Animated Blog Posts

Make your blog look stunning with three different animated blog postal service customizations. Can be used on lists, weblog posts, carousels, and slideshows.

Click here to add this customization to your site.

Blithe Announcement Bar

Draw more attending to your announcement bar with this Squarespace animation. Bully for special offers that you want to promote.

Click here to add this blithe announcement bar to your website.

Paradigm Animations

Reveal your images on scroll with these Squarespace animations. Select between x furnishings, including fade-in, tilt down/upward, slide up, and more.

To add the image animations to your Squarespace site, click Edit , and then the image, and the pencil icon that appear. In the popup, get to Pattern and lastly Animations .

Site-broad Animations

Add site-wide animations to your site in a few seconds. A powerful manner of adding many animations at the same time if yous don't have the time to alter every unmarried chemical element past itself.

To add the site-wide animations to your Squarespace site, simply become to Design > Site Styles > Animations. I would recommend using the medium or fast speed setting, since boring will reveal your elements very slowly, especially on mobile.

Make your own CSS animations

If you know CSS, you can create your ain CSS animations for whatsoever element on your Squarespace website. Some examples of what you can practice with your elements are fade in and out, rotate, bounce, and scale. Here is a great guide by HubSpot on how to brand CSS animations.

Don't know how to make CSS animations? Here is a complimentary list of some of the about useful CSS animations.

Animated Inset Backgrounds

A super cool effect to make your inset backgrounds animate. Select betwixt two animated inset backgrounds and a few static ones.

Click hither to add this effect to your website.

Hover Animations on Galleries

Make your galleries more interesting with these hover animations. Select between ii dissimilar styles: shadow and inset.

Click here to add hover animations to galleries.

Conclusion

Although Squarespace animations are relatively unproblematic to add together, they tin exist a dandy style to grab a user's attention, capture their imagination and make them want to come back for more. They can also be effective in adding a certain level of fun to a website.

Looking for more customizations? And so you should view my peak Squarespace plugins and useful CSS snippets.