Making Text Jump With SVG and CSS

SVG is a handy tool for animating individual letters of a word. By converting text to vector outlines, each letter can become its own element that CSS can target independently for animation — though the same effect is achievable with plain HTML, SVG was the right fit for this particular project.

Setting Up the SVG

The workflow starts in a design tool like Figma. Keep each letter in its own text box rather than typing the whole word at once. This matters when you outline the strokes: if all letters live in a single text box, the outlines get merged into one combined vector path that is difficult to read and style.

With each letter as its own text box, applying the outline stroke action produces separate vectors per character.

Once outlined, the points can be edited if needed, though this isn't required for the animation.

After outlining, place everything inside a frame and group each word separately. This ensures the exported SVG contains a g element per word, which is useful for applying animations to the whole group.

When exporting from Figma, be sure the id option is enabled. Without it, the output produces path elements that lack id attributes, making them much harder to target individually.

Cleaning Up the Export

The generated SVG contains some unnecessary elements. A stray rect can be removed entirely, and the inline height and width attributes on the root SVG element can go too if you plan to set a background color on the page instead.

Look closely at the structure of the export: the g element uses an id matching its frame name, and each word group contains individual path elements with their own ids. This is why proper naming inside the design tool translates into clean, readable markup.

One quirk worth noting: Figma exports the letters in reverse order within each word group. The paths may appear with the first letter last, so reorder them so each letter sits in the correct sequence before adding animation classes.

Positioning and the Bounce Keyframe

To prepare the letters for their dance, offset each one downward by 2px. This reserve space ensures the letters won't clip at the bottom of the viewBox when they jump upward. The viewBox itself may need adjusting after this shift, otherwise the bottom of each glyph gets cut off.

g path {
  transform: translateY(2px);
}
<svg class="header" viewBox="0 0 146 13" fill="none" xmlns="http://www.w3.org/2000/svg">

With spacing handled, target the g that wraps the word to be animated and give it an infinite animation count:

/* targets the word "enthusiasm" */
g:nth-child(3) path {
  animation-name: wiggleWiggle;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

The keyframe animation does most of the work:

@keyframes wiggleWiggle {
  20%,
  100% {
    transform: translate(0, 2px); /* stay on the baseline for most of the animation duration */
  }

  0% {
    transform: translate(0, 0px); /* hop up */
  }
  10% {
    transform: translate(0, 2px); /* return to baseline */
  }
}

Notice the first part of the keyframe selection — the 20%, 100% values. This keeps all the text resting on its baseline through most of the animation cycle. That pause is what creates a comfortable delay between each bounce instead of a frantic, continuous motion.

Staggering Each Letter

The real fun starts with the animation-delay property. By applying increasing delays to successive letters, each one hops just after the previous letter, producing a wave-like effect across the word.

Target each letter by its id and set a slightly larger delay each time:

#E {
  animation-delay: 0s;
}

#N {
  animation-delay: 0.1s;
}

#T {
  animation-delay: 0.15s;
}

#H {
  animation-delay: 0.2s;
}

#U {
  animation-delay: 0.25s;
}

#S_2 {
  animation-delay: 0.3s;
}

#I {
  animation-delay: 0.35s;
}

#A {
  animation-delay: 0.4s;
}

#S {
  animation-delay: 0.45s;
}

#M {
  animation-delay: 0.5s;
}

The code is repetitive — a more sophisticated loop could generate these rules — but for a one-time animation that won't need regular updates, writing them out is perfectly acceptable.

The payoff is an animated title where each letter of "ENTHUSIASM" bops up and down, one after the next, as if the word itself can barely contain its excitement.