Framer motion (combined with split text and react) animation only animates opacity and not other properties like transform

Question

I am working on a website written in React. I use Framer Motion and SplitText to animate my text. In the code below i try to animate the text by splitting it in spans. The text is animating (letter by letter), but only the opacity (and not the Y-movement). I don't understand why this won't work for other properties like transform. Can someone help me to find the error below?

import { SplitText } from "@cyriacbr/react-split-text";
import React from "react";
import { motion } from "framer-motion";

function Mywork() {
  return (
    <div className="flex justify-center items-center relative min-w-full min-h-full">
      <motion.div
        transition={{ staggerChildren: 0.1 }}
        className="text-white text-4xl"
      >
        <SplitText
          LetterWrapper={({ wordIndex, countIndex, children }) => (
            <motion.span
              className={`wrapper opacity-60 cursor-pointer`}
              initial={{ y: -100, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{
                type: "spring",
                stiffness: 100,
                duration: 10,
                delay: countIndex * 0.1,
              }}
              whileHover={{ scale: 0.8, duration: 1 }}
            >
              {children}
            </motion.span>
          )}
        >
          This is a test
        </SplitText>
      </motion.div>
    </div>
  );
}

export default Mywork;

I tried the code above and in the browser and the inspection shows that the properties are changing in the html code (see image below). However, on the page the letters are not moving. Only changing in opacity.

Answer 1

You can't animate x or y for <span> because it's an inline element. It flows with the content and doesn't have explicit x and y positions 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:

span.wrapper {
    display: inline-block;
}