Why not work my text animation with Framer Motion?

[nikolicsmilan77]

I want make a text bubble with little text animation.

This is a React.js project.

I use Framer Motion to the animation.

This component SpeechBubble.js accept the text via props

It seems to me the code is correct but yet not work.

Where is my fault?

Thank you

SpeechBubble.js

import React, { useState } from "react";
import "./speechBubble.css";
import { motion } from "framer-motion";


export default function SpeechBubble(props) {
  const line1 = props.maintext;
  const line2 = props.description;
  console.log(`line1: ${line1}`);
  console.log(`line2: ${line2}`);

  const sentence = {
    hidden: { opacity: 1 },
    visible: {
      opacity: 1,
      transition: {
        delay: 0.5,
        staggerChildren: 0.08,
      },
    },
  };

  const letter = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
    },
  };

  return (
    <motion.div
      className="frame-speech-bubble"
      variants={sentence}
      initial="hidden"
      animate="visible"
    >
      {line1.split("").map((char, index) => {
        return (
          <motion.span key={char + "-" + index} variants={letter}>
            {char}
          </motion.span>
        );
      })}

      <br />
      {line2.split("").map((char, index) => {
        return (
          <motion.span key={char + "-" + index} variants={letter}>
            {char}
          </motion.span>
        );
      })}
      
    </motion.div>
  );
}
reactjs
framer-motion