← Visual Library / Effects

Bobbing element

An element gently floats up and down on a slow loop. 'Treading in water.' Subtle aliveness for hero illustrations, mockup phones, badge graphics.

Effects Built

Use when — you have a hero illustration or product mockup that risks feeling static. Adds life without distracting. Combine with a shadow that also moves for full-on hover effect.

Live demo

Premium plan
$49 / mo

CSS

.float-card {
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  }
  50% {
    transform: translateY(-12px);
    box-shadow: 0 22px 32px rgba(0,0,0,0.10);
  }
}

The shadow trick

Don't just animate transform. Animate the box-shadow too: when the element is up, its shadow should be LARGER and LIGHTER (more diffuse — further from the ground). When it's down, shadow tightens. This sells the lift convincingly.

Dials

Distance: -12px is subtle. -20px reads more energetic.

Speed: 4s is meditative. 2.5s is bouncy. 6s is yoga-instructor calm.

Easing: always ease-in-out for the bob. Linear is robotic, ease-out is unbalanced.

Pair with stagger: if multiple cards are bobbing, add animation-delay: 0.5s, 1s, 1.5s on siblings so they're out of phase. The composition feels alive instead of military.

Don't

Don't put this on text. The eye reads bobbing text as broken / distracting. Reserve for image cards, icons, mockups, badges.

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.