Currently utilizing React, MUI, along with iTyped
The animation implemented involves backspacing text and typing the next word in a specified array until reaching the final word. I am looking to enable a click function on the div containing this animation to restart it.
const typedCaller = () => {
init(textRef.current, {
showCursor: false,
backDelay: 1500,
loop: false,
strings: ['Developer', 'Trainer', 'Administrator']
})
}
const typedCaller2 = () => {
init(textRef.current, {
showCursor: false,
backDelay: 1500,
loop: false,
strings: ['Developer', 'Trainer', 'Administrator']
})
}
const textRef = useRef();
useEffect(() => {
typedCaller();
},[])
return(
<Description className='SubText' onClick={typedCaller}>
{description1} <span ref={textRef}></span>
</Description></Box>
)
After reaching the end of the animation displaying 'Administrator', clicking causes 'Developer' to start typing followed by backspacing and only one instance of 'Trainer'. It seems like a need to clear the leftover text from the initial animation onClick or toggle the loop: false/true property for starting and stopping the animation. Any assistance would be highly appreciated!