Previous Article Next Article Add Floating Animation To Your Squarespace Website Using CSS
Posted in Css

Add Floating Animation To Your Squarespace Website Using CSS

Add Floating Animation To Your Squarespace Website Using CSS Posted on May 24, 20183 Comments



In this video I’ll show you how to add a floating effect animation to your Squarespace website using CSS.

Squarespace Block/Collection Identifier – Handy plugin for Chrome: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

The CSS:

#YOURBLOCKIDENTIFIERHERE {
animation-name: floating;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left:30px;
margin-top: 5px;
}

@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}

Other Squarespace animations and effects:

Typewriter animation: https://youtu.be/UOjEr631S7I
Add drop shadows to your images: https://youtu.be/w0wom5IP8K4

3 comments

  1. I tried this and it is not working, I applied to the custom CSS section and selected my block# for my logo in the top left hand corner, also not sure why but the chrome extension is not working for me

Leave a Reply

Your email address will not be published. Required fields are marked *