UI: Components
Scroll Driven Animation
A collection of classes for scroll-driven animations. Chrome only for now.
- an-bounce-in
- an-bounce-in-down
- an-bounce-in-left
- an-bounce-in-right
- an-bounce-in-up
- an-fade-down
- an-fade-down-left
- an-fade-down-right
- an-fade-in
- an-fade-in-scale
- an-fade-left
- an-fade-out
- an-fade-out-scale
- an-fade-right
- an-fade-up
- an-fade-up-left
- an-fade-up-right
- an-flip-diagonal
- an-flip-down
- an-flip-left
- an-flip-right
- an-flip-up
- an-reveal
- an-reveal-circle
- an-reveal-polygon
- an-slide-down
- an-slide-in
- an-slide-out
- an-slide-up
- an-zoom-in
- an-zoom-in-rotate
- an-zoom-out
- an-zoom-out-rotate
animation-range modifiers:
- ar-contain
- ar-cover
- ar-exit
Scroll Down ↓
Bounce
an-bounce-in-down | ar-cover
an-bounce-in | ar-cover
an-bounce-in-left | ar-cover
an-bounce-in-right | ar-cover
an-bounce-in-up | ar-cover
Fade
an-fade-down | ar-contain
an-fade-down-left
an-fade-down-right
an-fade-in | ar-contain
an-fade-in-scale | ar-cover
an-fade-left
an-fade-out | ar-exit
an-fade-out-scale | ar-exit
an-fade-right
an-fade-up
an-fade-up-left | ar-cover
an-fade-up-right | ar-cover
Flip
an-flip-diagonal
an-flip-down
an-flip-left
an-flip-right
an-flip-up
Reveal
an-reveal
an-reveal-circle | ar-contain
an-reveal-polygon | ar-contain
Slide
an-slide-down
an-slide-in | ar-cover
an-slide-out | ar-exit
an-slide-up
Zoom
an-zoom-in | ar-contain
an-zoom-in-rotate | ar-cover
an-zoom-out | ar-contain
an-zoom-out-rotate | ar-exit
