baby-i-am-faded

Animates react components when in view, uses emotion for the animations code, completely tree shakable, super tiny

Features

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

Demo

You can find a demo website here.

Install

yarn add baby-i-am-faded

Usage

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

Limitations

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