Animated Transition Components

Dev Design Library indexes 61 Animated transition components from 20 open-source UI libraries, with the most coming from GreatUI, Amicro Micro Transitions, Kinetics, React Bits and UI Lab. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the transition components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Transition components belong to the Effects group.

• CrtwarpReact Bits · ReactFull-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.
• PresenceChakra UI · ReactUsed to animate the entry and exit of an element while controlled the render behavior
• Blur FadeMagic UI · ReactBlur fade in and out animation. Used to smoothly fade in and out content.
• Page Side By Sidetransitions.dev · HTML/CSS
• Origami Envelope UnfoldAmicro Micro Transitions · ReactGeometric triangular envelope flap opening with 3D perspective flip.
• SwapbeUI · ReactCross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.
• Skeleton RevealSpectrum UI · ReactA skeleton that pulses while loading, then cross-fades and un-blurs into the real content.
• Page TransitionUser Interface Wiki · React
• Tabs-02 - TransitionShadcn Space · ReactTabs component
• Img Liquid TransitionPixel Perfect · ReactHover to ripple both frames through a flowing noise warp as one dissolves into the other.
• 3D Cube RotateKinetics · HTML/CSSClick to roll a face in with depth
• Hover TransitionComponentry · ReactEight polished hover transitions with per-card animation, direction, color, and content controls.
• Blur FadeAnimations (Svelte) · SvelteA component that animates content with blur and fade effects, supporting directional movement and intersection…
• Color Wipe Page TransitionGreatUI · ReactPage transition where a block of colour wipes across the screen between routes.
• SwapShark UI · ReactAnimate between two visual states with smooth transitions.
• Paper ShredderUI Lab · ReactDrag a file into the shredder and it comes out in strips.
• Dither DissolveCojeev UI · ReactCaller scenes exchange beneath a deterministic ordered dither cover.
• Blur FadeVelora UI · ReactThe workhorse entrance — blur, fade and drift into view.
• Sliding PanelSkecher UI · ReactA direction-aware panel transition with interruptible motion and reduced-motion fallbacks.
• Tilt Slide TransitionSora UI · ReactMulti-page editorial portfolio transition with tilted scaling exit and diagonal clip-path entrance, powered by View…
• Halftone RevealReact Bits · ReactPrint-style halftone dot matrix that resolves into sharp content around the cursor.
• Page TransitionAmicro Micro Transitions · ReactDynamic fullscreen page transition animation.
• Img Zoom Blur TransitionPixel Perfect · ReactHover to punch through a radial zoom-blur — the first image streaks outward as the second rushes in.
• Clip WipeKinetics · HTML/CSSOverlay unmasks left-to-right with clip-path
• Ripple TransitionComponentry · ReactWebGL image transitions with noisy refractive waves, chromatic edges, glow, and click-triggered ripple origins.
• Curtain Page TransitionGreatUI · ReactPage transition where a curtain closes over the screen and opens on the next page.
• Pull To RefreshUI Lab · ReactPull the feed down and new posts slide in at the top.
• Grain DissolveCojeev UI · ReactCaller scenes dissolve through a grainy pigment field with a soft focus exchange.
• Paper CrumpleReact Bits · ReactAn image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a…
• Page Turn CurlAmicro Micro Transitions · ReactRising paper sheet with dynamic corner curling border-radius transition.
• Text Block TransitionsPixel Perfect · ReactCodrops "Text Block Transitions" — faithful ports of all 12 demos from
• E Ink RefreshKinetics · HTML/CSSA full inverse flash, then the type settles into the paper
• Sweep Page TransitionGreatUI · ReactPage transition where a panel sweeps across the screen between routes.
• Sticky Note PeelUI Lab · ReactPeel the top reminder off by its corner to mark it done.
• Pixel SwapCojeev UI · ReactA staggered tile mask exchanges two compositions without duplicating their interactive content.
• Pixel SwapReact Bits · ReactPixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and…
• Perspective FlipAmicro Micro Transitions · ReactTransition where content flips in 3D perspective to show the next state.
• Folding DoorsKinetics · HTML/CSSTwo panels swing open in 3D on hover
• Cascade Page TransitionGreatUI · React
• Tear Off CalendarUI Lab · ReactTear a day off to move forward, pull one back to go back.
• PresenceCojeev UI · ReactMotionPresence keeps keyed children mounted for their exits. MotionSurface adds coordinated lifecycle states to an…
• Pixel TransitionReact Bits · ReactPixel dissolve transition for content reveal on hover.
• Roller Blind DropAmicro Micro Transitions · ReactMinimalist architectural roller shade dropping smoothly from header.
• Noise DissolveKinetics · HTML/CSSFilm grain peels back to uncover a colour field
• Cross Blur Page TransitionGreatUI · React
• Zipper RevealUI Lab · ReactUnzip the pouch to reveal the code inside.
• Wave WipeCojeev UI · ReactAn organic wave rises across caller content to reveal the next scene.
• ShredderReact Bits · ReactA list with a paper shredder at the bottom. Drag a row into the slit and the rollers tug it in, pull it through and…
• Split Gate RevealAmicro Micro Transitions · ReactPrecision vertical center-split security gate sliding apart.
• Page PeelKinetics · HTML/CSSTop card rotates around its left edge like a page turning
• Interlocking Page TransitionGreatUI · React
• Square AccordionAmicro Micro Transitions · ReactSquare Accordion loading animation.
• Skeleton To ContentKinetics · HTML/CSSShimmering placeholder resolves into real content on click
• Page Transition ShaderGreatUI · React
• Accordion BlindAmicro Micro Transitions · React
• Pixel Page TransitionGreatUI · React
• Shutter SlideAmicro Micro Transitions · React
• Pixel Swipe Page TransitionGreatUI · React
• Sine Wave Page TransitionGreatUI · React
• Staggered Page TransitionGreatUI · React
• Venetian Blinds Page TransitionGreatUI · React

Libraries with Animated transition components

• GreatUI
• Amicro Micro Transitions
• Kinetics
• React Bits
• UI Lab

Related categories

• Transition Components
• React Transition Components
• Tailwind CSS Transition Components
• Animated Effect Components
• Animated Image Effect Components
• Animated Marquee Components
• Animated Reveal Wrapper Components
• Animated Border Effect Components
• Animated Mask Effect Components
• Animated Glow Effect Components
• Animated Spotlight Effect Components
• Animated Tilt Effect Components
• Animated Blur Overlay Components