Framer Motion


Uncategorized

Updated Jun 5th, 2022

NPM link here

Colby Fayock has a good video here

Fireship of course…here (also goes over modal approach)

With Styled Components

An extra step but still simple. Here. And here.

With TypeScript

Package seemingly comes with types built in.

Using the API

Fade in effect:

import {motion} from “framer-motion”

Wrap a div in tags

add initial=”hidden”

and

animate=”visible”

then add:

variants={{…}}

HOVER EFFECT

note: converting and li to motion.li the applied className no longer works.

So does it work on a custom styled component? With a little more work but yes.