Why y and x axis parameter didn't work for staggerChildren animation in framer motion?-CodePudding

My question is fairly simple but i'm struggling to find the solution. Here i'm trying to create a staggering animation for each letter in a sentence, i want to use the y axis as a parameter to animate but i'm not getting the result i wanted as the sentence fully mounted without animating. But when i tried to use opacity as a parameter, it works exactly fine. What did i do wrong here? Any help would be appreciated :)

// import "./styles.css";
import { motion } from "framer-motion";


export default function App() {
  const quotes = "Hello World.";

  const parent = {
    animate: {
      transition: {        
        staggerChildren: 0.1,
      },
    },
  };

  const child = {
    initial: { y: 400 },
    animate: {
      y: 0,
    },
  };
  return (
    <div>
      <motion.div variants={parent} initial='initial' animate='animate'>
        {
          quotes.split('').map((item, index) => (
            <motion.span variants={child} key={index}>{item}</motion.span>
          ))
        }
      </motion.div>
    </div>
  );
}

To help you see my problem, here is codesandbox example https://codesandbox.io/s/busy-mountain-fv58xc?file=/src/App.js:0-620

CodePudding user response：

Animating x and y doesn't work for <span> because it's and inline element. It flows with the content and doesn't have an explicit x and y position to animate.

You can change your spans to a block-level element (like div), or you could add some styling to tell the spans to display as blocks:

<motion.span style={{display: "inline-block"}} variants={child} key={index}>
    {item}
</motion.span>