20 lines
530 B
TypeScript
20 lines
530 B
TypeScript
import React from "react"
|
|
import { motion } from "framer-motion"
|
|
function MoveTopLeftWhenVisible({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.7 }}
|
|
variants={{
|
|
visible: { opacity: 1, translateX: 0, translateY: 0 },
|
|
hidden: { translateX: 20, translateY: 5, opacity: 0 },
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
)
|
|
}
|
|
|
|
export default MoveTopLeftWhenVisible
|