React Animation Primitives
These are motion primitives rather than finished UI: wrappers and hooks you compose around your own content. Treating animation as a layer you apply, instead of a property you rebuild inside every component, is what keeps timing consistent across a site — one easing curve, one duration scale, one stagger interval. Each entry states which properties it animates, because anything outside transform and opacity costs a layout or paint on every frame and will show up on a mid-range phone.
22 entries in this category
All 22 animations · 5 free
Aperture Iris Reveal
animationsA photo revealed by a real iris — straight metal blades that part and twist from the centre — while a corner readout clicks down the f-stops from ƒ/22 to ƒ/1.4.
Ink Bleed Reveal
animationsA photograph that arrives the way ink wicks into paper — an organic front spreading from a point, with a wet tide-line of ink running just ahead of it.
Venetian Blind Slideshow
animationsA hero slideshow whose photographs change like venetian blinds turning — slats flip in a staggered cascade, with the dark frame showing through as they go edge-on.
Verlet Cloth Banner
animationsA banner hanging from its fixings as real Verlet cloth — previous-position integration, relaxation passes and a fixed timestep behind an accumulator.
Elastic Overscroll List
animationsRubber-band overscroll with the real asymptotic curve, engaged only at the boundary.
View Timeline Reveal
animationsScroll reveals on a real CSS view timeline — off the main thread, and visible by default where it is not supported.
Intent Safe Menu
animationsA mega-menu that reads where the pointer is heading, so cutting the corner never steals the submenu.
Pendulum Menu
animationsMenu items that hang from a rail and swing on real pendulum physics, nudging their neighbours.
Scroll Depth Layers
animationsA parallax scene where every layer derives from one shared scroll source.
3D Cylinder Marquee
animationsWords on a rotating cylinder, with the radius derived from the face count.
Pixel Dissolve Reveal
animationsA block-grid dissolve driven by a seeded shuffle, so it clears perfectly evenly.
Flip Reveal Tiles
animationsA tile grid that flips on a diagonal wavefront to resolve into one image.
Path Follow Scroll
animationsA marker that rides an SVG curve on scroll, banking through the bends.
Velocity Marquee Rail
animationsA marquee that accelerates with scroll speed and flips direction when you scroll back.
Scroll Card Deal
animationsA pile of cards that fans out symmetrically as its section crosses the viewport.
FLIP Grid Reorder
animationsA filterable grid whose tiles travel to their new positions instead of snapping.
Pointer Parallax Scene
animationsA depth system where layers separate under the pointer from one shared motion source.
Line Mask Reveal
animationsReveals text one line at a time, each sliding up from behind its own clipping mask.
Morphing Shape Loop
animationsA decorative blob whose SVG outline continuously morphs between shapes.
Page Transition Wrapper
animationsWraps route content so it animates out and the next page animates in instead of swapping instantly.
Scroll Velocity Skew
animationsSkews its content based on how fast the page is being scrolled, relaxing back to flat at rest.
Stagger Reveal Group
animationsA wrapper that reveals its children one after another as the group scrolls into view.