How to Animate Text with SVG and CSS

The other day I was helping my pal Jez work Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in the title animate a little bit? Like, what if each of the letters in the word bopped up and down enthusiastically?

Like this:

Neat, huh? To build this thing I knew we could use SVG for the text and then animate things with CSS. Each letter is a path with its own class, which makes it possible to select each one. That said, there’s nothing really stopping us from doing this with HTML and CSS. Using SVG is just one approach that felt right to me at the time.

To get started we headed over to Figma and typed out the text in separate text boxes. We did this so that when we click on the “Outline stroke” menu item here...

...we have individual vectors of each letter. This will help us when we export the SVG so that we can add the correct CSS classes to each element. Once we’ve outlined the strokes of each letter we can then edit the points in the vector (but we don’t need to for what we’re about to do):

If we added all the text in one box and clicked "Outline Stroke" then it would’ve created a single vector with all these letters combined. That would then make a single path with the coordinates and that’s pretty difficult for me to style or even understand what the heck is going on in there.

Next up, I put all these letters in a Frame (Sketch calls this an Artboard) and placed each word into a Group. This way, when they’re exported as an SVG, each word will be in it's own g tag which also helps us style the letters:

From there, I exported the SVG — but! — I had to make sure to include the id option when doing it.

If we don’t do this we’ll get a bunch of path elements for each letter but they won’t have an id attributes.

This is what we get after the export:

I'm not sure how much of this weirdness is me and how much is Figma’s SVG export, but I deleted that <rect> element because it's unecessary. Then I gave the body element a background so I could see the text and remove those inline height and width attributes on the SVG itself:

Neato! Now we can get to the fun part: animating each letter in the word.

If you look at the HTML of that example above you’ll notice there's a g element which with an id with the same name of the Frame in Figma.There are also g elements for each word and every path that makes up the word will have an individual id. (This is why naming our Frames and Groups properly, as well as keeping things organized in any design application, is important.)

One thing that surprised me was the order in which each path is exported though: it’s in the opposite order than the one I’d expect, with M being the first letter in the “ENTHUSIASM” group. So I cleaned that up a bit and made sure each letter is in the correct order.

To get the animation working we first bump down each letter by 2px:

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

That’s because I want each letter to make a 2px hop which we’ll get to in a bit. I also noticed with this change I’d need to update the SVG viewbox too. Otherwise, the bottom of each letter will be cut off:

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

I probably should’ve have just repositioned the text within the frame in Figma and exported it again, but this is fine for what I needed.

Now I can target the third group in the SVG (the word “enthusiasm”) and set the 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 code above then calls the wiggleWiggle animation below:

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

See the beginning of that keyframe — the 20%, 100% bit? What that's saying is "keep all the text on the baseline for the majority of the animation." That’s what gives us a nice delay between each bounce:

I learnt this trick from this really good post about animation timing by Geoff and I would highly recommend you check it out if you’re about to start learning about animation in CSS.

Now for the fun bit: with the animation-delay property, we can make each letter hop just after the one before it. There’s definitely a smarter way I could be doing 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 sure is messy, but writing the loop wouldn’t save me that much time and I won’t need to update it in the future, so I think it’s fine enough. And with that we’re pretty much done!

We now have a bouncy, enthusiastic title to say hello. Yay for wiggly text!

The post How to Animate Text with SVG and CSS appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2xuOE1h
via IFTTT