Tips on how to Animate Textual content with SVG and CSS

The opposite day I used to be serving to my pal Jez work Dept. of Enthusiasm, the location for his e-newsletter, and I had a thought. What if we made the phrase “enthusiasm” within the title animate a bit of bit? Like, what if every of the letters within the phrase bopped up and down enthusiastically?

Like this:

CodePen Embed Fallback

Neat, huh? To construct this factor I knew we might use SVG for the textual content after which animate issues with CSS. Every letter is a path with its personal class, which makes it potential to pick out every one. That mentioned, there’s nothing actually stopping us from doing this with HTML and CSS. Utilizing SVG is only one method that felt proper to me on the time.

To get began we headed over to Figma and typed out the textual content in separate textual content packing containers. We did this in order that once we click on on the “Define stroke” menu merchandise right here…

…we now have particular person vectors of every letter. This may assist us once we export the SVG in order that we are able to add the right CSS courses to every aspect. As soon as we’ve outlined the strokes of every letter we are able to then edit the factors within the vector (however we don’t have to for what we’re about to do):

If we added all of the textual content in a single field and clicked “Define Stroke” then it might’ve created a single vector with all these letters mixed. That might then make a single path with the coordinates and that’s fairly troublesome for me to model and even perceive what the heck is happening in there.

Subsequent up, I put all these letters in a Body (Sketch calls this an Artboard) and positioned every phrase right into a Group. This manner, once they’re exported as an SVG, every phrase can be in it is personal g tag which additionally helps us model the letters:

From there, I exported the SVG — however! — I had to verify to incorporate the id choice when doing it.

If we don’t do that we’ll get a bunch of path components for every letter however they gained’t have an id attributes.

That is what we get after the export:

CodePen Embed Fallback

I am undecided how a lot of this weirdness is me and the way a lot is Figma’s SVG export, however I deleted that aspect as a result of it is unecessary. Then I gave the physique aspect a background so I might see the textual content and take away these inline top and width attributes on the SVG itself:

CodePen Embed Fallback

Neato! Now we are able to get to the enjoyable half: animating every letter within the phrase.

In the event you have a look at the HTML of that instance above you’ll discover there is a g aspect which with an id with the identical title of the Body in Figma.There are additionally g components for every phrase and each path that makes up the phrase can have a person id. (Because of this naming our Frames and Teams correctly, in addition to maintaining issues organized in any design software, is necessary.)

One factor that shocked me was the order during which every path is exported although: it’s within the reverse order than the one I’d anticipate, with M being the primary letter within the “ENTHUSIASM” group. So I cleaned that up a bit and made certain every letter is within the appropriate order.

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

g path

That’s as a result of I would like every letter to make a 2px hop which we’ll get to in a bit. I additionally observed with this alteration I’d have to replace the SVG viewbox too. In any other case, the underside of every letter can be minimize off:

I in all probability ought to’ve have simply repositioned the textual content throughout the body in Figma and exported it once more, however that is high-quality for what I wanted.

Now I can goal the third group within the SVG (the phrase “enthusiasm”) and set the animation-count to infinite:

/* targets the phrase “enthusiasm” */
g:nth-child(three) path
animation-name: wiggleWiggle;
animation-duration: 2.5s;
animation-iteration-count: infinite;

The code above then calls the wiggleWiggle animation beneath:

@keyframes wiggleWiggle

See the start of that keyframe — the 20%, 100% bit? What that is saying is “maintain all of the textual content on the baseline for almost all of the animation.” That’s what provides us a pleasant delay between every bounce:

CodePen Embed Fallback

I learnt this trick from this actually good publish about animation timing by Geoff and I’d extremely advocate you test it out in the event you’re about to start out studying about animation in CSS.

Now for the enjoyable bit: with the animation-delay property, we are able to make every letter hop simply after the one earlier than it. There’s undoubtedly a better method I may very well be doing this, however I simply used the id of every letter like so:

#E
animation-delay: 0s;

#N
animation-delay: zero.1s;

#T

#H

#U
animation-delay: zero.25s;

#S_2
animation-delay: zero.3s;

#I

#A
animation-delay: zero.4s;

#S
animation-delay: zero.45s;

#M

It certain is messy, however writing the loop wouldn’t save me that a lot time and I gained’t have to replace it sooner or later, so I feel it’s high-quality sufficient. And with that we’re just about performed!

CodePen Embed Fallback

We now have a bouncy, enthusiastic title to say good day. Yay for wiggly textual content!

Leave a Reply