I am trying to implement a simple fadeIn animation for tab contents using framer-motion.

When I click on a tab I want to display contents of selected tab with a fadeIn effect, which is working as expected on Firefox but does not works on Chrome.

Below is my code

1. Animation Variant

const TAB_CONTENT_LOADING_VARIANTS = {
  fadeIn: {
    opacity: [0, 1],
    transition: {
      duration: 0.7,
      ease: 'easeIn'
    }
  }
};

2. Tabs code

<AnimatePresence>
  {
    tabState.selectedId === 'step-1' && (
      <TabPanel
        as={ motion.span }
        key="step-1"
        animate="fadeIn"
        variants={ TAB_CONTENT_LOADING_VARIANTS }
        { ...tabState }
      >
        ...Contents
      </TabPanel>
    )
  }
  {
    tabState.selectedId === 'step-2' && (
      <TabPanel
        as={ motion.span }
        key="step-2"
        animate="fadeIn"
        variants={ TAB_CONTENT_LOADING_VARIANTS }
        { ...tabState }
      >
        .... Contents
      </TabPanel>
    )
  }
</AnimatePresence>

I have checked for console logs but did not find any.

Can anybody please help me?