Children showed before the wrappers are initiated

[bbjerling]

The text/children is showed before the wrappers are initiated - causing text to be shown before an in-animation starts.

const WordWrapper: React.FC<WordWrapperProp> = ({ children, wordIndex }) => {
return (
  <span style={{ display: 'block', backgroundColor: 'red' }}>{children}</span> // Actually using a motion.span here. But this is just to show the delay clearly, without framer motion.
);
const MemoizedWordWrapper = React.memo(WordWrapper);

<SplitText WordWrapper={MemoizedWordWrapper}>{text}</SplitText>

[bbjerling]

I managed to fix this by using a state and the onAnimationStart on my motion.span. Not the most beautiful solution though. Any thoughts on making this better?

const [animationStarted, setAnimationStarted] = useState(false)
function onAnimationStart() {
    console.log("Animation started")
    setAnimationStarted(true)
}

const WordWrapper: React.FC<WordWrapperProp> = ({ children, wordIndex }) => {
    return (
        <motion.span
            onAnimationStart={onAnimationStart}
        >
            {children}
        </motion.span>
    );
};
const MemoizedWordWrapper = React.memo(WordWrapper);

<SplitText
    WordWrapper={MemoizedWordWrapper}
    style={{ opacity: animationStarted ? 1 : 0 }}
>
    {text}
</SplitText>