Add Floating Animation To Your Squarespace Website Using CSS

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

Some of my other Squarespace animations and effects:

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); }
}
________________

Want to support my content? Consider donating here:

#Squarespace #CSS #SquarespaceTutorial

[samcrawford]

Mate this has been such a help for me designing client websites. You're a life saver!

[garyalbertmusic]

This was great thank you! I needed floating images and this was perfect. QUESTION: is there a way to give a floating image a sound file that plays when you click on it??? I want some music I've composed to actually play when someone clicks a floating image... ???

[TheMiloRez]

Well, I found this extremely interesting and loved the accent! I subscribed! Starting a Squarespace project soon so I'll be checking your videos on a regular.

[wheelerjuell]

PLEASE keep making these videos! Super helpful and easy to follow.

[kellyhutsby]

Love your videos...I really appreciate a tutorial that's done by someone with an actual personality and sense of humour!

[oliviadiasbagott]

Thanks for this! It's given such an up to my client's project!

[christineacharles]

It worked, thank you so much! I appreciate your tutorials. Super easy

[backlightfilms]

just had to hit like after 9 seconds! Thanks so much!

[starcompany-py]

Hi Carl, thank you so much for this! I tried using multiple blocks separated by comma for various blocks, works well however, is there any way to add an animation delay or randomness when they trigger so they don't all move at the same exact time when the page loads?

[rasmuseriksson]

Just discovered your channel. Awesome.

[thefallenangel]

Is there any way to adjust the float to also move left and/or right? To create a somewhat circular effect? Thank you so much for the video!

[flujarfly]

Thank you! This was so helpful! Subbed!

[tuitia]

How can I make it so that this only floats when you hover over it?

[thecowsgomoo]

Hi Carl, thanks for the code. It worked! If I want to have the image float lower and higher can I do that?

[nivalngz]

Excellent, thank you very much for your videos !

[alexaschaefer]

Hey Carl! Awesome video! Can this css be used for other types of animations (ie. slide up effect)? I'm trying to add animation to video and text to slide up instead of adding animation to the whole website.

[chloeseroussi]

Can you do a video tutorial on how to make an image float over the entire squarespace website as you scroll through it continues to float above sections etc.

[emilywylde]

Hi Carl, thanks for such a great tutorial - sadly it isn't working for me, any advice? I've copied and pasted the code from description and still no luck. Would love to get it working! Cheers in advance.

[christopherberman]

Hey! I added the CSS then copied my ID into it and saved it - it was working, but then it stopped working after i refreshed the page

[traceyannburgess]

Hi Carl, firstly I want to say how much I love your videos thank you! I am interested in building a Squarespace website ( I had a Wordpress one and Wix before) I am particularly interested in floating animation. Is it still possible to do floating animation on the new 7.1 Squarespace update?
Thank you in advance 👍