DEV Community

loading...
Cover image for Pt: 2 Needles to Nuxt: Building a Website for a Tooth and Nail Tattoos

Pt: 2 Needles to Nuxt: Building a Website for a Tooth and Nail Tattoos

drewclem profile image Drew Clements ・2 min read

If you haven't yet, check out part 1!

Quick Summary

Some decent progress was made this past week. I was able to get the app setup with Nuxt-- which makes it really easy to get Tailwind CSS in place.

I made it as far as building the responsive header out, and I dropped the base templates for the different pages in as well.

Website Header Preview - desktop
Website Header Preview - mobile

What did I learn?

This was my first time animating an svg based on the state of something in the UI. This may not be the best way to accomplish this, but it worked nonetheless.

A crude definition of an svg is that it's code the generates a shape. Knowing that, I created a vue component and placed the code for the svg in the template.

This allows me to pass it props and do some styling with Tailwind. I'm setting the state of whether mobile menu is open or not in my header component. So, from there I pass that data to the svg component.

<MobileMenuIcon :nav-open="navOpen" />
Enter fullscreen mode Exit fullscreen mode

Now that the svg is aware of when the nav is open, I can do some animating with tailwind.

I didn't do much. In this specific icon, there are 3 bars, and I wanted the top and bottom to animate into an 'X' while the middle fades away.

The animation is handled with conditionals and tailwind classes. The top and bottom bar receives a rotate and translate classes to reposition, while the middle bar's opacity gets adjusted.

And these classes were applied directly to the 's in the svg like so:

<path
  class="transition duration-200 ease-in-out transform"
  :class="`${navOpen ? 'rotate-45 scale-105 -translate-y-1 translate-x-2' : ''}`" />

// There's a lot more in the path to generate the shape.
Enter fullscreen mode Exit fullscreen mode

And here's the result!

Alt Text

There's still a long ways to go on this project. Next will be building in some content on the homepage and getting some base components in place!

You can check out the repo here.

Discussion (1)

pic
Editor guide
Collapse
sethburtonhall profile image
Seth Hall

Love this man. I have yet to explore SVG animation, but this seems like a good starting point.