Roll Mixin - Animation Demo

🎯 Roll Mixin Features

This mixin adds 360° rotation animation to any component. It works on hover and can be triggered programmatically. Perfect for adding playful interactions to buttons, cards, or any element!

🎯 Basic Roll Demo

Hover over this button to see it roll 360°:

⚡ Duration Control Demo

Adjust the roll duration and see the difference:

Adjustable Roll Speed

Hover to roll • Current duration: 500ms

Duration (ms):

🎨 Applied to Different Components

See how the roll mixin works on various elements:

Card Component

📄 Document Card

Hover to roll this card

Custom Element

🎨 Custom Element

Rolls on hover

Icon Element

🎯

📖 Implementation Guide

          // Using the roll-mixin element
          <roll-mixin roll-duration="1000">
          <button>Hover to roll!</button>
          </roll-mixin>

          // Programmatic control
          const mixin = document.querySelector('roll-mixin');
          mixin.roll(); // Trigger roll manually
          mixin.setRollDuration(500); // Change duration
        

✨ Key Features:

Automatic Hover Detection: Rolls on mouse enter
Programmatic Control: Call roll() method anytime
Configurable Duration: Set via roll-duration attribute
Event Emission: Emits roll-started and roll-completed events
Transform Preservation: Maintains existing CSS transforms
Orthogonal Design: Works independently with other mixins

📜 Event Log

Event log will appear here...

🔄 Roll Mixin - Animation Demo