… to animate
In my last post I talked about the usefulness of SVGs in the world of coding, however that is just the tip of the iceberg!
Today we’re looking at animating svgs (or really any component) using css!
For starters we are going to need an SVG or an element in our div to animate. For this the purposes of this lesson I’ll be animating this little guy I made in Figma
- Note: As is the case with many SVGs this has layers, some of which are obscured by others but we are going to take advantage of that in a bit!
Then we can render out our image as an SVG(THIS IS VERY IMPORTANT FOR OUR PURPOSES) and drag the file directly into VS code
Once we have the file in our code, as above, we’ll copy aaaallllllllllllllll of that SVG code and paste it into a nice little div we made for it in our code. Make sure to give that div a clear className that specifies your SVG so you can call on it easily in the CSS side of things. To that point- Figma has a super cool feature where you can set vector and group names and pass them in the file as each element’s id. When you paste this into your code, simply change the “id” to “className”(for React syntax. For other language defer to the method of whatever language you are coding in). We are actually going to go through and apply this to all of the elements we are wanting to have unique animations, for this project that will be the head, eyes-open and his ball
Now that we have those I’m going to apply some CSS to the whole SVG to get it how I want it on the page (NOTE: the Parent div that is placing this SVG is very project specific. You can use it for a general idea, but I would not apply these same styling choices in all cases
Next, we animate!
First up, Grogu’s head usually does a super cute bobble, so we are going to mimic that in the CSS. I chose to do that by using transform: translate() and rotate(). this will allow the head to wobble on its own axis instead of the main SVG axis as follows
Notice I passes back to the values of 0px for both X and Y and 0deg in the keyframe range of 48%-68%. The reason I chose that is it gives a pause from the head bobble that will allow for a bit more natural asynchronicity.
Next Up, those peepers!
And Lastly- the ball
and we have this happy guy!
But let’s step it up just a bit.
In the Mandalorian we see Grogu meditating on Tython and when he does it activates this beautiful glowing text. We’re going to quickly code a version of that.
For starters the font can be found over here at https://aurekfonts.github.io
The one we are using in this tutorial is PrimeJedi, but choose whichever and have fun!
(to learn how to load in new font families check out my first post!)
Now here is the css fun I made to give the title that glowing effect, along with my background css
Dank Farrik! Now we have a kriffing cutie!
Want to add Grogu to your code?
you can find this whole repository here: