useAnimate() and the animate attribute

[carlBgood]

So, I'm trying to use the useAnimate() hook. It is scoped to a parent, I'm trying to animate a parent and its children.

The parent is a p element with the initial and variants set. The children are mapped spans with initial and variants set.

If I assign an animate attribute to the parent, it will work, but I'm trying to control when it starts using the useAnimate() hook. If I assign animate to the attribute, it starts on mount. With the useAnimation() hook, the controls can be applied to the attribute. But with the useAnimate() hook, the 'animate' function cannot be assigned.

<motion.p 
	className="line1" 
	style={{margin:0}} 
	initial={lineVariants.initial} 
	animate={<THE PROBLEM HERE>}
	variants={lineVariants}
>
	{line1.split("").map((char,index) => {
		return (
			<motion.span  
				variants={childVariants} 
				initial={childVariants.initial} 
				style={{fontSize:'8vw'}} 
				key={char + "-" +index} 
			>{char}</motion.span>
		)
	})}
</motion.p>