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.

289 shown, 133.6 KB if you used every one

Animations

Entrances, exits and attention seekers. Click to play.

Entrances

Exits

Composable atoms

Attention seekers

Ambient loops

Effects

Surfaces, text, borders, loaders. Always on.

Surfaces & materials

Shapes & clipping

Borders & dividers

Reveals & wipes

Depth & 3D

Pointer & interaction

Loaders & status

Images & video

Atmosphere

Text & type

Glitch & distortion

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-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-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

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-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-vt-fade
an-vt-morph

Catalogue ​