015 • Scan animation
August 30, 2023
Share
Why did I use code
override?
I think it's much more convenient to use code overrides when creating more complex animations with multiple keyframes, especially within components where we can't use features like 'loop' yet.
The code is very easy to understand and straightforward, and using it means we don't have to create multiple variants and connections between them.
I think it's much more convenient to use code overrides when creating more complex animations with multiple keyframes, especially within components where we can't use features like 'loop' yet.
The code is very easy to understand and straightforward, and using it means we don't have to create multiple variants and connections between them.
import type { ComponentType } from "react"
import { motion } from "framer-motion"
//change animationHeight if you need
const animationHeight = -100
export function Scan(Component): ComponentType {
return (props) => {
return (
<Component
{...props}
as={motion.div}
animate={{
opacity: [0, 1, 1, 0],
scale: [0.9, 1, 1, 0.9],
y: [0, animationHeight],
}}
transition={{
duration: 8,
repeat: Infinity,
ease: "linear",
}}
/>
)
}
}Contact
If you have any questions, feel free to
If you have any questions,
Newsletter
Thanks
for
watching!
Sign
up
to
newsletter
and
receive
updates
on
new
Framer
tips
& freebies.