These days, I am designing a website for an artist, NamSin Kwak. This handwriting UI animation was designed for the intro page of the website. I would like to share how I designed and handed over it to the front-end engineer, Ryan Yu.
Let’s get started.
① Layout design in Sketch
First of all, I designed all static pages; intro, main, about, content, etc. And discussed them with Ryan how it would work, for example, transition, micro animation, etc. Ryan Yu and I decided to draw the intro page using handwriting effects with SVG animation.
② Select the image and export it as SVG.
③ Open that SVG file in Adobe Illustrator.
I changed colour white to black but you can ignore this because we are going to delete fill colour in the next step.
④ Delete fill colour and give a stroke 1px. I am going to name these layers as a “mask” layers.
⑤ Draw a path with the Pen tool inside each mask layer. The animation will follow the path you draw.
⑥ When you draw the path, you must draw it a bit off from the edge of each mask layer like the image below.
⑦ If some mask layers are grouped together, ungroup them and rename the layer accordingly like below image.
⑧ Select the two layers, ‘mask layer’ and ‘path layer’. And then do the clipping mask.
object > Clipping Mast > Maskor command + 7
⑨ Export the entire artboard as SVG format like below images.
Export > Export As...
10. Open the SVG file in the code editor you use. Copy and paste in the HTML file.
That’s a wrap!!!!!
Also, I am going to write a tutorial on how to code this UI animation so please stay tuned and gives me 👏loves if you liked it.
🎉🎉🎉 Happy codesign today 🎉🎉🎉
Lastly, I would like to share <FrontEnd30 /> where I learnt many cool front-end techniques.