How to create our own text animation using SVG and CSS
SVG or as we know as Scalable Vector Graphics is a very useful image in almost all design aspects. One of the SVG functions in website is we can create simple illustration or graphic responsively because it is vector-based and scalable. We can also use SVG for creating web animation using several CSS knowledge!
In this case, I will try to make my own text animation using SVG and CSS. I would like to say thanks to Mr. Dev Ed for his video tutorial about SVG text animation that I’ve just learned yesterday.
Tools we need
We just need text editor and design editing tool. In this case, I’m currently using Figma as design tool (Figma is available on Windows, Mac, Linux, and even our browser by go to figma.com!) and Sublime Text as a text editor (we can specify code editor we want such as Visual Studio Code, Atom, or others).
Working with SVG using Figma
We will use Figma to create out SVG text and generate the code into HTML. Firstly open our Figma program, and we will see the app would be like this.
Let’s add our first Figma project by clicking the “plus icon” on the top right section of Figma, then select “Blank canvas” to choose our new blank space for our project, and then click the blue “Create file” button.
We can see our first Figma interface after creating project above. We can optionally rename the project by double-clicking the Untitled text and name it whatever we want. In this case, I would like to name it “SVG animation tutorial”.
Creating Frame
Next, we need to create our text on some device interface. We can use Frame tool to create some frame interface. It will be useful to make our text centered inside the frame. By clicking Frame (between rectangle and cursor icon) and choose our device interface (Desktop for example) in the right sidebar.
Adding text
Now let’s create our text by clicking “T” icon and click randomly we want inside the project, and type our text. We can also customize our text color, font, and also size as we want, and of course — in the right sidebar.
Converting text into outline stroke
To make each letter (I mean, not all letters at the same time) animatable, let’s click right the text, and click “Outline Stroke”. We will see the text icon on the left side will be changed to curved line icon as en effect that we convert the text into the outline stroke. If we don’t convert the text into outline stroke, after we get the SVG code, we will get the big single SVG element with only single path so it cannot be used to animate each letter as we can see later on.
Adjusting the stroke line
Now it’s time to adding the stroke to our text by adjusting stroke and removing fill on of course — on the right sidebar (we need to make a little bit scrolling down of the right sidebar to see the fill and stroke section).
Getting SVG code
Finally, right click into the text, then Copy/Paste, then Copy as SVG to get the SVG code in HTML. And let’s move on to our text editor for pasting the SVG code.
Working with HTML using Sublime Text
We will use Sublime Text (or we can use Visual Studio Code or other text editors) to working with HTML file and also creating animation of our SVG. Firstly with our starter HTML file (named index.html).
Pasting SVG code
Paste our SVG code inside HTML document, specifically after <body> element. Then, add “id” attribute of <svg> element by animate like this.
What happened if we don’t convert text into outline stroke? (Extra case)
If we don’t convert the text into outline stroke, after we get the SVG code, we will get the big single SVG element with only single path so it cannot be used to animate each letter like this.
Adding CSS style
Let’s adding CSS style for make the SVG text centered and initialize the animation path. Inside the <style> element, type:
And let’s see in our browser…
Animating SVG text: Introduction to `stroke-dasharray` and `stroke-dashoffset` in CSS
Before we started animating our SVG text, firstly we need to know about stroke-dasharray andstroke-dashoffset in CSS.
The
stroke-dasharrayproperty is used to create dashed lines (W3Schools.com)The
stroke-dashoffsetproperty in CSS defines the location along an SVG path where the dash of astrokewill begin. The higher the number, the further along the path the dashes will begin. (css-tricks.com)
Getting total length on each letter
Using these two CSS property, we can use it for animate our SVG text. But, we need to get the total length of each letter using a little JavaScript. Inside the <script> element, type:
and let’s see in our browser, then Ctrl+Shift+C on browser (open Developer Console), and click Console Tab. and we can see the index (integer), then the total length (float) inside console.
Applying animation
Now, let’s apply the animation of the SVG text by adding some code inside <style> element.
Let’s see what going on in the code we’ve just added above.
keyframes is used in CSS to create an animation state. In this case, we want to make the stroke-dashoffset become 0 to make the text visible.
#animate path:nth-child(n) is used in CSS to select several nth element of path inside the SVG. Here, we select from n = 2 to n = 10. Inside them, we’ve applied the animation using animation CSS properties and added the stroke-dasharray and stroke-dashoffsetproperties based on total length obtained before (index 1 to 9).
And let’s see in browser and finally we got our animation SVG text!
Conclussion
Finally, we have successfully create our own text animation using SVG and CSS. We can adjust and customize several CSS properties to improve and make our text animation better.
Non-scientific references
- Graham, Geoff. 2016. stroke-dashoffset. https://css-tricks.com/almanac/properties/s/stroke-dashoffset/
- Dev Ed, 2018. SVG Animation With Text Tutorial, https://www.youtube.com/watch?v=vJNVramny9k
- W3Schools. SVG Stroke Properties.https://www.w3schools.com/graphics/svg_stroking.asp