motion
motion copied to clipboard
[BUG] Animation Dosent work ( A Transform:none style adding to the motion component )
<nav id="nav-bar" class="fixed left-0 top-0 z-50 grid h-24 w-full grid-cols-[0.8fr,2fr,1fr] grid-rows-1 place-content-start bg-background/90 px-6 text-sm text-foreground shadow-sm" style="transform: none;"></nav>
Motion Components add a transform:none style, Not all the motion components specificlly the ones that has 'fixed' position ( in my project )
initial={{ translateY: "-100%", scaleY: 0.8 }}
animate={{
translateY: 0,
scaleY: 1,
}}
transition={{
duration: 0.4,
delay: 0.1,
type: "spring",
stiffness: 30,
}}
id="nav-bar"
className="fixed left-0 top-0 z-50 grid h-24 w-full grid-cols-[0.8fr,2fr,1fr] grid-rows-1 place-content-start bg-background/90 px-6 text-sm text-foreground shadow-sm"
>```
`` `@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply min-h-screen bg-background/95 font-poppins text-foreground selection:bg-foreground/30;
}
main {
@apply relative h-full w-full pt-24;
}
}
This isnt a motion.nav self closed tag there are items but I only added the nav ,
Same problem
motion: "12.0.0-alpha.2"
import { motion } from 'motion/react'
export const IntroBg = () => {
return (
<motion.div
initial={{ scaleY: '100%' }}
animate={{ scaleY: '0%' }}
transition={{ duration: 2.5, ease: [0.83, 0, 0.17, 1] }}
className='absolute inset-0 origin-top bg-pampas-50 mix-blend-difference'
></motion.div>
)
}
The animation completes correctly but at the end, a transform: none is added.