Loading...
Loading...
Use when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.
npx skill4agent add dylantarre/animation-principles gesture-responsescubic-bezier(0.34, 1.56, 0.64, 1)| Gesture | Press Duration | Release Duration | Easing |
|---|---|---|---|
| Tap/Click | 50ms | 200ms | ease-out + overshoot |
| Long Press | 50ms | 300ms | ease-out |
| Drag Start | 100ms | - | ease-out |
| Drag Release | - | 300ms | spring |
| Swipe | - | 200-400ms | ease-out |
| Pinch | real-time | 300ms | spring |
/* Button press */
.button {
transition: transform 50ms ease-out;
}
.button:active {
transform: scale(0.97);
}
/* Release with overshoot */
.button:not(:active) {
transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Material ripple */
.ripple {
animation: ripple 600ms ease-out forwards;
}
@keyframes ripple {
from {
transform: scale(0);
opacity: 0.5;
}
to {
transform: scale(4);
opacity: 0;
}
}// Smooth drag with slight lag
element.style.transform = `translate(${x}px, ${y}px)`;
element.style.transition = 'transform 50ms ease-out';
// Snap back with spring
element.style.transition = 'transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)';
element.style.transform = 'translate(0, 0)';