LogOut Button Animation

AI Overview: Animated LogOut Button

This project is an interactive and playful "Log Out" button designed to enhance user experience through complex micro-interactions. Instead of a simple text change or redirect, this button features a stick-figure character that physically walks through a door and "falls" out of the button area when clicked. It comes in both light and dark themes to demonstrate how the animation adapts to different UI backgrounds.

The visual structure is built entirely with HTML and SVG. Each part of the character—including the head, arms, wrists, and legs—is defined as a separate SVG path or group. This granular structure allows the CSS to target and animate individual limbs independently, creating a realistic walking and falling motion.

<svg class="figure" viewBox="0 0 100 100">
  <circle cx="52.1" cy="32.4" r="6.4" />
  <g class="arm1">
    <path d="M55.5 56.5l-6-9.5c..." />
    <path class="wrist1" d="M69.4 59.9L58.1..." />
  </g>
  <!-- Additional limbs defined here -->
</svg>

The HTML uses nested SVG elements to define the character's body parts so they can be animated individually.

The animation logic relies heavily on CSS Custom Properties (variables). By defining variables for the rotation and translation of every limb, the project keeps the stylesheet clean. When a user hovers over or clicks the button, these variables are updated to transition the character from a standing pose to a walking or falling pose.

.arm1 {
  transform: var(--transform-arm1);
  transform-origin: 52% 45%;
  transition: transform calc(var(--walking-duration) * 1ms) ease-in-out;
}

CSS variables allow the animation state to be controlled dynamically while maintaining smooth transitions.

JavaScript acts as the "director" of the sequence. It manages a state machine (e.g., default, hover, walking, falling) and uses a series of timed functions to update the button's CSS variables. When the button is clicked, the script cycles through these states in order, creating a choreographed scene where the character walks forward, the door slams, and the character spins away.

let updateButtonState = (button, state) => {
  if (logoutButtonStates[state]) {
    button.state = state
    for (let key in logoutButtonStates[state]) {
      button.style.setProperty(key, logoutButtonStates[state][key])
    }
  }
}

This JavaScript function updates the CSS variables on the fly to move the character through different animation phases.