5 Ways to Add Animation to Your Website

Website animations are a great way to elevate your website and make the user’s experience more interesting in order to capture their attention. In fact, your site visitors have come to expect some type of movement or animations when visiting a website. When it comes to Squarespace websites there are a few different ways you can go about adding some movement to your page. In this blog we will go over our top five go-to ways to incorporate animations. 

SITE WIDE ANIMATIONS

The first and the simplest way to add animation in Squarespace is to enable their site wide animations. To do this open the site styles panel and click accessories > animations. Then choose a style (Fade, Scale, Slide, Clip, and Flex). Each one will affect the images, text, buttons, and other elements as they scroll on the page. You can choose the style and how fast the animations happen depending on the look you are going for. Our suggestion is to test each one out and see what suits your website the best!

BUTTON HOVERS

Another way to add some more subtle movement to your website is to create hover effects on your links or buttons. To do this you will need to either utilize the plugin Squarekicker or add some additional CSS. One of my go-to button hover effects is changing to background color on hover. 

For reference here is that code and what it looks like on a website!

//button color hover//

#siteWrapper .sqs-button-element--primary:hover {

 color:black;

  background-color:#e7e869

}

If you are new to CSS for styling Squarespace sites, here is a great reference for more ideas on what you can do!

VIDEO BLOCKS

Incorporating video throughout your website is another great way to break up the static pieces of the page and engage the user as they pause to watch. Our preferred type of video is b roll with no sound so it gives the site some movement without taking away from the rest of the website. To add a video on Squarespace go to edit > add a block > video. From there you can either link to a youtube video or upload your own. You can see an example of this on our home page here! Another one of our favorite examples is the product pages on Summer Fridays which you can see here!

SCROLL ANIMATIONS

The next way we like to add motion to websites is through scrolling animations. For Squarespace we use Squarekicker a design plugin that allows us to target specific elements we want to move on scroll. With site wide animations everything moves the same way but with Squarekicker you can have all of the page elements shifting in different ways. This allows you to keep everything static while just one thing is moving or have all elements strategically move together.

Last but not least we have gifs. When we say gifs we aren’t talking about the funny memes you see on social media but rather a file type that allows for continuous movement. Gifs can be utilized for small elements like logos or icons. One of our favorite ways we’ve used gifs is with our brand elements like the twinkling plus signs through our site or our spinning logo in the footer. To add a gif to your Squarespace site you will insert an image block and upload it the same way you would usually insert an image.

And there you have it! Those are our top 5 ways we typically incorporate some animation in our website design. Stay tuned for more tips and tricks🤍