Updated: Fade Content
By Steven Van ·
The React Bits wrapper adds blur, gray, grain, mist and pixel-block fades, plus staggered children and scroll-linked fades in and out.
Fade Content, the scroll-triggered wrapper in React Bits, has been updated with several new ways to fade content in.
New fade styles
Content can now fade in plain, or out of focus, or from washed-out gray. It can also fade through grain, mist or pixel blocks.
Stagger and scroll-linked fades
Children can be staggered, and fades can be linked to scroll so content fades in and out as the page moves.
Installation
The component is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/FadeContent-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →