Catalogue

Every class in the library, grouped by what it is. Animations play when you click. Effects are surface treatments and apply on render, because a glass panel has nothing to play. Scroll is driven by the scrollbar and is demonstrated properly in the scroll lab.

Nothing autoplays. Use the size control to make the previews bigger; the choice is remembered.

420 shown, 177.8 KB if you used every one

Animations

Entrances, exits and attention seekers. Click to play.

entrance

attention

exit

Effects

Surfaces, text, borders, loaders. Always on.

Utilities

Timing, easing, origins and fill modes. Nothing to look at: they configure the effect they sit beside.

• an-3d
• an-alternate
• an-armed
• an-contain
• an-delay-1s
• an-delay-2s
• an-delay-3s
• an-delay-4s
• an-delay-5s
• an-depth-stack
• an-ease-back
• an-ease-back-in
• an-ease-back-out
• an-ease-bounce
• an-ease-circ
• an-ease-cubic
• an-ease-ease
• an-ease-expo
• an-ease-in
• an-ease-in-out
• an-ease-linear
• an-ease-out
• an-ease-overshoot
• an-ease-quad
• an-ease-quart
• an-ease-quint
• an-ease-sine
• an-ease-snap
• an-ease-spring
• an-ease-spring-hard
• an-ease-spring-soft
• an-fast
• an-faster
• an-fill-backwards
• an-fill-forwards
• an-fill-none
• an-gpu
• an-img-compare
• an-img-grain
• an-img-parallax
• an-infinite
• an-layered-parallax
• an-magnetic-zones
• an-motion-ok
• an-origin-bottom
• an-origin-bottom-left
• an-origin-bottom-right
• an-origin-center
• an-origin-left
• an-origin-right
• an-origin-top
• an-origin-top-left
• an-origin-top-right
• an-overflow-clip
• an-paused
• an-repeat-1
• an-repeat-2
• an-repeat-3
• an-reverse
• an-running
• an-seen
• an-slow
• an-slower
• an-smooth
• an-snap-center
• an-snap-start
• an-snap-x
• an-snap-y
• an-sr-only
• an-stagger
• an-stagger-reverse
• an-stagger-stop
• an-text-split-chars
• an-text-split-lines
• an-text-split-words

Child hooks

Selector targets the parent effect styles. Inert on their own.

• an-arrow
• an-compare-top
• an-face
• an-label
• an-peek
• an-zone

Scroll

Needs a scrollbar. Run these in the scroll lab.

• an-hero-shrink
• an-parallax
• an-progress-bar
• an-progress-ring
• an-reveal
• an-reveal-both
• an-reveal-hold
• an-reveal-iris
• an-reveal-mask-sweep
• an-reveal-replay
• an-reveal-reset
• an-reveal-self
• an-scrub
• an-scrub-blur
• an-scrub-clip
• an-scrub-down
• an-scrub-fade
• an-scrub-left
• an-scrub-right
• an-scrub-rotate
• an-scrub-scale
• an-scrub-up
• an-sticky-stack
• an-timeline-source
• an-timeline-target

View transitions

Only visible across a real navigation.

• an-morph-shared
• an-vt-curtain
• an-vt-fade
• an-vt-flip
• an-vt-hero
• an-vt-list-item
• an-vt-morph
• an-vt-slide
• an-vt-wipe
• an-vt-zoom