2.9 KiB

Raw Blame History

Story 9.11: Animations & Micro-interactions

Epic Reference

Epic 9: Design & Branding Implementation

User Story

As a user, I want subtle, professional animations, So that the interface feels polished and responsive.

Acceptance Criteria

Transitions

Button hover: 150ms ease
Card hover: 200ms ease
Modal open/close: 200ms
Page transitions (optional)

Loading States

Skeleton loaders for content
Spinner for actions
Progress indicators

Feedback Animations

Success checkmark
Error shake
Toast slide-in

Hover Effects

Links: Color transition
Cards: Lift effect
Buttons: Background transition

Requirements

All animations subtle, professional
Under 300ms duration
Respect prefers-reduced-motion

Technical Notes

/* Base transitions */
.transition-default {
  @apply transition-all duration-150 ease-in-out;
}

.transition-slow {
  @apply transition-all duration-200 ease-in-out;
}

/* Button hover */
.btn {
  @apply transition-colors duration-150;
}

/* Card lift */
.card-hover {
  @apply transition-all duration-200;
}
.card-hover:hover {
  @apply -translate-y-0.5 shadow-md;
}

/* Skeleton loader */
.skeleton {
  @apply animate-pulse bg-charcoal/10 rounded;
}

/* Toast animation */
.toast-enter {
  @apply transform translate-x-full opacity-0;
}
.toast-enter-active {
  @apply transform translate-x-0 opacity-100 transition-all duration-200;
}

/* Success checkmark */
@keyframes checkmark {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

.checkmark-animated path {
  stroke-dasharray: 100;
  animation: checkmark 0.3s ease-in-out forwards;
}

/* Error shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.3s ease-in-out;
}

<!-- Skeleton loader component -->
@props(['lines' => 3])

<div class="space-y-3">
    @for($i = 0; $i < $lines; $i++)
        <div class="skeleton h-4 {{ $i === $lines - 1 ? 'w-2/3' : 'w-full' }}"></div>
    @endfor
</div>

<!-- Loading spinner -->
<div wire:loading class="flex items-center gap-2">
    <svg class="animate-spin h-5 w-5 text-gold" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
    </svg>
    <span>{{ __('common.loading') }}</span>
</div>

Definition of Done

Button transitions work
Card hover effects work
Skeleton loaders work
Spinners work
Toast animations work
All animations subtle
Reduced motion respected
Tests pass

Estimation

Complexity: Medium | Effort: 4 hours

2.9 KiB Raw Blame History