motion icon indicating copy to clipboard operation
motion copied to clipboard

[BUG] Animation Dosent work ( A Transform:none style adding to the motion component )

Open Tenuka22 opened this issue 1 year ago • 1 comments

<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 ,

Tenuka22 avatar Apr 28 '24 10:04 Tenuka22

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.

ulmetum avatar Nov 28 '24 23:11 ulmetum