All animations / Micro-interactions
Micro-interactions
Small feedback moments: toggles, likes, ripples, ticks and cursors. 6 animations.
Micro-interactions
Toggle switch
A switch whose knob slides and squishes slightly, with the track colour easing between states.
CSSBeginner
Micro-interactions
Like button burst
Tapping the heart pops it with a spring and releases a small ring of particles.
CSSJavaScriptIntermediate
Micro-interactions
Smooth accordion
FAQ panels open and close with an animated height, using the grid-template-rows 0fr to 1fr trick, plus a rotating chevron.
CSSJavaScriptIntermediate
Micro-interactions
Ripple click
A circle expands from the exact click point and fades, the Material-style press feedback.
CSSJavaScriptBeginner
Micro-interactions
Success checkmark draw
A circle draws itself, then the tick strokes in, using SVG stroke-dasharray and stroke-dashoffset.
CSSSVGBeginner
Micro-interactions
Custom cursor follower
A ring trails the pointer with smooth easing and grows with a label when it passes over a target.
CSSJavaScriptAdvanced