A Quick overview of SVG Animations

One of the challenges a Front-end Developer face is to sync with designer regarding feasibility of UI/UX. These days SVG is becoming very popular due to lightweight, does not get pixelate when scale up etc. Another major things we can do with SVG is animate it to use in website. Here is a quick overview of .SVG support in different browser.

So, today I am going to talk about how you can do svg animation.

In short, this is same as CSS animation.

To start with, lets export a svg file.

This is a SVG Vector created in Adobe XD.

One thing I did before exporting is to group individual chat item and named chatOne & other one as chatTwo

SVG in code editor

Open the file using any code editor/IDE. So if you closely look at this there is a code starts with

<g id="chatOne">
...
</g>
<g id="chatTwo" transform="translate(1399 353)">
...
</g>

this is the path we need to animate

we can see transform attribute is in chatTwo but not in chatOne which means chatTwo will transform to given attribute of X and Y.

So lets start animating. I want to have translateY so it goes up and shows like chat.

I’ve added these code in style part of the svg file to animate.

#chatOne {
   animation: chatOne;
   animation-duration: 6s;
   animation-iteration-count: infinite;
}

@keyframes chatOne {
0% {
   opacity: 0;
   transform: translateY(70px);
}
10% {
   opacity: 1;
   transform: translateY(70px);
}

30% {
   opacity: 1;
   transform: translateY(0px);
}
100% {
   transform: translateY(0px);
}
}
#chatTwo {
   animation: chatTwo;
   animation-duration: 6s;
   animation-iteration-count: infinite;
}
@keyframes chatTwo {
0% {
   opacity: 0;
}
32% {
   opacity: 0;
}
35% {
   opacity: 1;
}
100% {
  opacity: 1
}
}

So if you have idea about css animation you will understand easily.

using #chatOne & #chatTwo I selected two path id and

animation: chatOne;
animation-duration: 6s;
animation-iteration-count: infinite;

this three line means, my animation keyframe will be named chatOne, animation-duration is 6 second lastly I want to play it as loop so animation-iteration-count to infinite. same goes for chatTwo. Now to animate in keyframe

@keyframes chatOne {
0% {
   opacity: 0;
   transform: translateY(70px);
}
10% {
   opacity: 1;
   transform: translateY(70px);
}

30% {
   opacity: 1;
   transform: translateY(0px);
}
100% {
   transform: translateY(0px);
}
}

I want chat opacity will be 0 when loads and fades in when10% animation loads. also translateY(70px) remains same. Now when 30% animation loads I want to go to its original place as svg which is translateY(0px). And rest of the time will will stay there.

For chatTwo keyframes are

@keyframes chatTwo {
0% {
   opacity: 0;
}
32% {
   opacity: 0;
}
35% {
   opacity: 1;
}
100% {
  opacity: 1
}
}

So as you remember chatOne goes translateY(70px) to translateY(0px) when 30% animation loads and both are in same animation speed of 6 second. so chatTwo opacity loads from 0 to 1 in 35%. By that time chatOne will go up. so it will show like chat animations. You can do lots of staff using keyframes.

Here is the final file.

Final file

This is it for today. You can ask me anything regarding this in twitter. thanks

Sazzad Sazib 🌐 (@sazzzadsazib) | Twitter