server/assets/js/react/components/FadeIn.tsx

44 lines
1.1 KiB
TypeScript
Raw Normal View History

2023-12-04 13:42:32 +00:00
import * as React from "react"
import { motion, useReducedMotion } from "framer-motion"
const FadeInStaggerContext = React.createContext(false)
const viewport = { once: true, margin: "0px 0px -200px" }
export function FadeIn({ ...props }) {
let shouldReduceMotion = useReducedMotion()
let isInStaggerGroup = React.useContext(FadeInStaggerContext)
return (
<motion.div
variants={{
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 24 },
visible: { opacity: 1, y: 0 },
}}
transition={{ duration: 0.5 }}
{...(isInStaggerGroup
? {}
: {
initial: "hidden",
whileInView: "visible",
viewport,
})}
{...props}
/>
)
}
export function FadeInStagger({ faster = false, ...props }) {
return (
<FadeInStaggerContext.Provider value={true}>
<motion.div
initial="hidden"
whileInView="visible"
viewport={viewport}
transition={{ staggerChildren: faster ? 0.12 : 0.2 }}
{...props}
/>
</FadeInStaggerContext.Provider>
)
}