1

SVG Line Animation with vivus.js

Today, I would like to share with you on how to create SVG Line Animation with vivus.js.

I was highly inspired by Ryan Yu’ CodePen. Thank you so much.

Table of content

1. Export font as SVG from Sketch
2. Optimise SVG
3. Copy SVG code
4. Edit HTML with accessibility in mind
5. Write JavaScript with vivus.js
6. Add second SVG plus aria-hidden in HTML for accessibility
7. Add callback function for animation
8. Move second SVG with translate3d()
9. Let’s position two SVG objects.

Let’s get started 🔮.

1. Export font as SVG from Sketch

Here is a thank you page I designed for FrontEnd30 website with Sketch.❤️

As you can see from the image above, we need to export two SVG objects.

1. Select the object.
2. Change the export type to SVG.
3. Click the Export button.

2. Optimise SVG

Most likely you will find an issue 👀 with SVG drawing when you directly use the raw SVG exported from Sketch, which you wouldn’t expect to see 😱:

🔎 The problem

As you can see from the above code in the Chrome DevTool, there are several <polygon> elements in the SVG. However, to create the drawing animation, they need to be <path> instead.

🔮 The solution

How could we change it from <polygon> to <path>?

There is a very simply way, Ryan Yu taught me how to do.

SVGOMG - SVGO's Missing GUI

① Go to SVG OMG website and drop your SVG asset.

② Make sure Do not tick merge paths ← 💥💥💥important💥💥💥

Check a new SVG code downloaded from SVG OMG in the DevTool.

As you can see, all <polygon> elements have changed to <path> elements. 🎉🎉

SVG OMG also optimise the SVG code for us.

A big shout out to SVG OMG again.❤️❤️❤️

3. Copy SVG code

Copy outlerHTML like above from DevTool.

4. Edit HTML with accessibility in mind

1. Paste the code in CodePen (or any text editor you prefer).

① Delete <style>element so we can apply our own styles.

style="


② For accessibility, add <title> inside <svg>.

<title> element allows screen readers to read out what the SVG is about; in our case, it’s Thank you.

<svg>
  <title>Thank you</title>
</svg>

5. Write JavaScript with vivus.js

vivus.js - svg animation

Go to JavaScript setting in the CodePen.

Add vivus.js script.

👀 As you can see from the documentation, add an id to <svg> so Vivus class will detect the <path> inside <svg>.

HTML

Add #id in html.

<svg id="c-text-line">
...
</svg>

JavaScript

Add below code in JavaScript.

new Vivus('c-text-line', {
   duration: 200,
   animTimingFuction: Vivus.EASE,
});

If you got the same animation like the above image, you are almost done!!!🎉🎉

6. Add second SVG plus aria-hidden in HTML for accessibility

Just do the same steps from 1 to 3 as we did above.

<div>
   <svg>c-text-line</svg>
   <svg>c-text-fill</svg>
</div>

Second SVG shouldn’t be read out by the screen readers because it contains same context as the first SVG.

So, We don’t need to add <title> this time but add arial-hidden to <svg>.

<svg class="c-text-fill" aria-hidden="true">
...
</svg>

7. Add callback function for animation

Add JS

const textFill = document.querySelector('.c-text-fill');
const showTextFill = () => {
  textFill.classList.add('is-active');
};
new Vivus('c-text-line', {
  duration: 70,
  animTimingFuction: Vivus.EASE,
}, showTextFill);

And add SCSS

.c-text-fill {
   opacity: 0;
   transition: opacity 0.5s ease;
&.is-active {
      opacity: 1;
   }
}

8. Move second SVG with translate3d()

Add SCSS

.c-text-fill {
   transition: opacity 0.5s ease, transform 0.5s ease 1s;
   &.is-active {
     transform: translate3d(-10px, 10px, 0);
   }
}

Tip) when you animate elements, use tranlate() instead of top/left property.

Check out those two articles for more details.

• Should I do the animation with Left or TranslateX? by Ryan Yu
• Why Moving Elements With Translate() Is Better Than Pos:abs Top/left. by Paul Irish

9. Let’s position two SVG objects.

Add HTML

<div class="c-text-group">
   <svg>c-text-line</svg>
   <svg>c-text-fill</svg>
</div>

Add SCSS

.c-text-group {
  position: relative:
}
.c-text-fill {
  position: absolute;
  top: 0;
}

Let’s see how it works.

It’s almost done but could you find something wrong?👀

If you found what is wrong, you must be a good frontend developer or good designer. The answer is below.

As you can see, there is a 2px gap between those two SVG elements because there are 2px borders (stroke) in the first SVG (.c-text-line).

So the second SVG(.c-text-fill) should move to right and down to 1px.

.c-text-fill {
  left: 1px;
  top: 1px;
}

Congratulation!! We’ve done!!! 🎉🎉🎉🎉

That’t all for now❤️

😄

Lastly, I would like to share <FrontEnd30 /> where I learnt many cool front-end techniques.

Master 30 front-end skills — FrontEnd30

🎉🎉🎉🎉🎉 Happy Coding Today 🎉🎉🎉🎉