Animates react components when in view, uses emotion
for the animations code, completely tree shakable, super tiny
- ๐ท TypeScript support - It is written in TypeScript to make it easier and faster to use the library
- ๐ Lightweight - Very little footprint on your project and no other dependencies required
- ๐ Fast - Buttery smooth experience thanks to the use of native asynchronous APIs and hardware acceleration
You can find a demo website here.
yarn add baby-i-am-faded
You can use the faded component like this
import { Faded } from 'baby-i-am-faded'
import 'baby-i-am-faded/styles.css'
export const App = () => (
<>
<Faded cascade>
<Placeholder />
<Placeholder />
<Placeholder />
<Placeholder />
<Placeholder />
<Placeholder />
</Faded>
<Faded whenInView triggerOnce>
<Placeholder />
</Faded>
</>
)
cascade
works only on the first 30 elements
cascade
animates only children with depth 1, not children of children
Animations are disabled by default on mobile browser (width less than 500px) and on devices that prefer reduced motion