Meh Day 37

I’ve been planning on learning how to animate certain parts of an SVG. [I haven’t put into account how daunting this task would be] anyways here’s the process.

I wanted to do something very simple so I looked into a list of ASCII emoji’s as you can see here [ here’s a link if you’re interested]

I love the meh face so I decided to do that. Since I’ll be using an SVG to animate [note: you can do this in pure HTML/CSS which is a lot easier but I’m doing it this way just to have a bit of understanding of svgs] I used sketch again to do the graphic. Here’s process [it’s basically text compiling but regardless]

okay. After exporting it to an SVG file, I start constructing the site, a basic HTML template with an SVG. here’s how it looks like

The started to make it responsive

okay, then I try to animate… I wanted to use a framework because there are a couple out there [witch are very cool!], but for some reason, it wouldn’t work. I looked into different resources, the thing is when looking at them and seeing the potential of SVG you feel excited and bummed at the same time. Excited about the possibilities, and sad that you can barley get a basic animation to run [learning curve I guess].

alright, so you’re about to see a series of failed attempts and the progress. I’ll add a bit of description of them. Here goes:

Finally able to target the element but the animation failed.

got it to move but umm the direction is wrong

great I managed to group them! But my direction is still wrong.

great I have it moving in the right direction, but it cuts off

wooohoooo the left arm is working perfectly! Now let’s do the right arm

ummm what just happened….

I started to fool around with translateX and well… I just can’t

I decided to target each piece individually [not smart but might get it to work]

okay now just one more bit and

what… I start playing with the degrees to see if I can fix this bloody issue and

it’s still weird but at least it’s not moving from the far end of the image but rather just in the left arm area. And here is where I hit a slump. I read and looked and tried and nothing. I keep getting this iffy result. Then I decided to improvise and well it worked. a stupid one-liner made the whole difference

I added a single g tag that has the translated coordinate and removed it from the actual right-hand group and it worked!

at this point, I wished I did an angry emoji rather than this but I guess meh. You can check out the project here. I went through a lot of resources during this so I’ll soon post an SVG resource list for whoever is interested.

If you’re still reading, thank you! and happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *