Circular Menu Animation

In this blog post, we'll explore how to create a circular menu animation using Vue.js and the CSS clipPath property. This technique can be used to create a visually pleasing effect where a menu appears to expand from a point and then contract back into it.

The Code

Here's the Vue.js code snippet we'll be discussing:

<script setup>
import { ref } from 'vue'

const show = ref(false)
const x = ref(50)
const y = ref(50)
const endRadius = ref(100)

function toggleMenu() {
  show.value = !show.value
}
</script>

<template>
  <div
    id="menu"
    :style="{
      clipPath: !show
        ? `circle(0px at calc(${x}px - 0.75rem) calc(${y}px - 0.75rem))`
        : `circle(${endRadius}px at calc(${x}px - 0.75rem) calc(${y}px - 0.75rem))`,
    }"
  >
    <!-- menu items here -->
  </div>
  <button @click="toggleMenu">
    Toggle Menu
  </button>
</template>

How It Works

This code uses the CSS clipPath property to create a circular mask for the menu animation. The mask starts as a circle with a radius of 0px when the menu is not shown (show is false), and expands to a circle with a radius of endRadius pixels when the menu is shown (show is true). The center of the circle is positioned at (x - 0.75rem, y - 0.75rem).

When the Menu is Hidden

When show is false, the clipPath property is set to circle(0px at calc(${x}px - 0.75rem) calc(${y}px - 0.75rem)). This creates a circle with a radius of 0px, effectively hiding the menu because the circle doesn't cover any part of it.

When the Menu is Shown

When show is true, the clipPath property is set to circle(${endRadius}px at calc(${x}px - 0.75rem) calc(${y}px - 0.75rem)). This creates a circle with a radius of endRadius pixels, revealing the menu because the circle covers it.

Positioning the Circle

The calc(${x}px - 0.75rem) calc(${y}px - 0.75rem) part of the clipPath property determines the center of the circle. The calc() function is used to subtract 0.75rem from the x and y coordinates, positioning the center of the circle.

Animating the Transition

As the value of show changes (for example, when a user clicks a button to open or close the menu), Vue.js automatically updates the clipPath property, causing the circle to expand or contract and creating the animation effect. The transition between the two states can be animated using CSS transitions or animations on the clipPath property. This isn't shown in the selected code, but it's a common technique to smooth out the change and create a more pleasing visual effect.

Conclusion

With Vue.js and CSS clipPath, you can create interesting and visually pleasing animations for your web applications. This technique of using a circular mask for a menu animation is just one example of what you can do. Happy coding!