Float animation
Also called floating animation or bobbing animation
A slow up-and-down drift on a loop that makes icons, illustrations, or product shots look weightless.
import { motion, useReducedMotion } from 'motion/react';
const TRAVEL = 10; // px up and back down
type FeatureIcon = { name: string; src: string };
export function FloatingIcons({ icons }: { icons: FeatureIcon[] }) {
const reduceMotion = useReducedMotion();
return (
<ul className='grid grid-cols-3 gap-6'>
{icons.map((icon, i) => (
<motion.li
key={icon.name}
animate={reduceMotion ? undefined : { y: [0, -TRAVEL, 0] }}
transition={{
// Different lengths and a negative delay start each icon at a
// different point in its loop, so they never move in sync.
duration: 3 + (i % 4) * 0.5,
delay: -i * 0.7,
ease: 'easeInOut',
repeat: Infinity
}}
className='grid size-16 place-items-center rounded-2xl border bg-background shadow-sm'
>
<img src={icon.src} alt={icon.name} className='size-8' />
</motion.li>
))}
</ul>
);
}Make the six feature icons around the hero image float: each moves up 10px and back down on a loop with ease-in-out, using durations between 3s and 4.5s and different negative animation delays so they never move in sync. Animate only transform, and keep them still when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Float animation?
A float animation moves an element a few pixels up and back down, over and over, with an ease-in-out curve so it slows at the top and bottom like something bobbing on water. It adds quiet life to hero illustrations, app icons, badges, and 3D product renders.
When several items float together, give each a slightly different duration and a negative animation-delay so they start at different points in the loop. In lockstep they look mechanical; with offset phases they look natural. A shadow underneath that shrinks as the item rises adds a sense of height.
Keep it subtle: 6 to 16px of travel over 3 to 5 seconds. Float decorative pieces only, leave text and buttons still so they stay easy to read and hit, and turn it off under prefers-reduced-motion.
Often confused with
- Bounce
- A bounce hits a stop and rebounds, like a ball on the floor. A float glides and eases gently at both ends of its path.
Related terms
All termsLooping animation
An animation that plays more than once, either a set number of times or forever, set in CSS with animation-iteration-count.
Yoyo animation
A looping animation that plays forward and then backward, so it moves back and forth smoothly instead of jumping back to the start.
Ease-in-out
An easing curve that starts slowly, speeds up in the middle, and slows down again at the end, tracing an S shape on a graph.
Stagger
Animating a group of items one after another with a small delay between each, so they arrive as a cascade.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.