Use SVG and CSS to create animated text effects

Recently, I was helping my friend Jez create his newsletter website Dept. of Enthusiasm, and I had an idea: What if we let the word "enthusiasm" in the title move slightly? For example, what if every letter in the word is pounding up and down with vitality?

The effects are as follows:

Very cool, right? I know we can use SVG to create text and then use CSS to make animations. Each letter is a path with its own class name, which makes it possible to select each letter. That said, nothing stops us from using HTML and CSS to achieve this. Using SVG was just one way I thought it was appropriate at the time.

First, we open Figma and enter the text into a separate text box. This is done so when we click on the "Outline stroke" menu item here...

…We can get a separate vector for each letter. This will help us add the correct CSS class for each element when exporting SVG. Once we have drawn the strokes of each letter, we can edit the points in the vector (but for what we are about to do, we don't need to do this):

If we put all the text in a box and click "Outline Stroke", then it will create a single vector containing all these letters. It will then create a single path with coordinates, which is very difficult for me to style and even understand what is going on there.

Next, I put all these letters in a frame (which Sketch calls the artboard) and put each word into a group. This way, when they are exported as SVG, each word will be in its own g tag, which also helps us style the letters:

Then, I exported SVG – but! ——I have to make sure that the id option is included when exporting.

If we don't do this, we will get a bunch of path elements for each letter, but they will have no id attribute.

After exporting, we get the following results:

I'm not sure how many strange things are my problem, how many are the SVG export issues for Figma, but I deleted<rect></rect> element, because it is unnecessary. I then set a background for the body element so that I can see the text and remove the inline height and width properties of the SVG itself:<rect></rect>

marvelous! Now we can get into the interesting part: animate every letter in the word.

If you look at the HTML in the example above, you will notice that there is a g element with the same id as the framework name in Figma. Each word also has a g element, and each path that forms the word has a separate id. (That's why it's important to properly name our frameworks and groups, as well as to maintain good organization in any design application.)

One thing that surprised me was the order of exporting for each path: it was the opposite of the order I expected, and the first letter in the "ENTHUSIASM" group was M. So I cleaned it up a little to make sure each letter is arranged in the correct order.

To make the animation work, we first move each letter down by 2 pixels:

 g path {
  transform: translateY(2px);
}

This is because I want each letter to jump 2 pixels, and we'll talk about that later. I also noticed that with this change I also need to update the SVG viewport. Otherwise, the bottom of each letter will be cut off:

<svg fill="none" viewbox="0 0 146 13" xmlns="http://www.w3.org/2000/svg"></svg>

I probably should just reposition the text inside the framework in Figma and export it again, but that's enough for what I need.

Now I can locate the third group in SVG (the word "enthusiasm") and set animation-count to infinite:

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

The above code calls the following wiggleWiggle animation:

 @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 */
  }
}

Have you seen the beginning of that keyframe - 20% , 100% part? It means "to keep all text on baseline for most of the animation". This is what brings a good delay between each rebound:

I learned this trick from this very good article by Geoff on animation time and if you are about to start learning CSS animation I highly recommend checking it out.

Now is the interesting part: Using animation-delay property, we can make each letter bend after the previous letter. I definitely have a smarter way to do this, but I just used the id of each letter, like so:

 #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;
}

It's really messy, but writing a loop doesn't save me a lot of time and I don't need to update it in the future, so I think it's good enough. In this way, we are almost done!

Now we have a bounced, vibrant title to say hello. Cheer for the beating words!

The above is the detailed content of How to Animate Text with SVG and CSS. For more information, please follow other related articles on the PHP Chinese website!