Animation Library
Categorized micro-interactions and transitions with technical specifications and downloadable examples.
Micro-interaction
Button Loading State
Smooth transition from normal to loading state
Duration: 0.3s
Easing: ease-in-out
Transition
Card Expand Transition
Card expanding to full screen with smooth animation
Duration: 0.4s
Easing: cubic-bezier(0.16, 1, 0.3, 1)
Gesture
Pull-to-refresh
Visual feedback for refresh action with spring effect
Duration: 0.5s
Easing: spring(1, 90, 10, 0)
Hover
Menu Item Hover
Subtle hover effect for menu items with underline
Duration: 0.2s
Easing: ease-out
Transition
Page Transition
Smooth page transition with fade and slide effects
Duration: 0.6s
Easing: cubic-bezier(0.65, 0, 0.35, 1)
Loading
Loading Skeleton
Content placeholder with subtle pulse animation
Duration: 1.5s
Easing: ease-in-out