Estoy tratando de hacer una diapositiva de texto vertical. Al no haber encontrado ayuda en reactjs , trato de hacerlo yo mismo y estoy bastante contento con el resultado, pero aparece un pequeño error al final de cada diapositiva de palabra.

Me imagino que hay varias formas de crear esta animación pero es la única que me llega con mis conocimientos en JS.

Aquí mi código:

 import React, { useEffect, useRef, useState } from 'react' const Version1 = () => { const [ words, setWords ] = useState(['Victor', 'Alex', 'Lucie']) const wrapperRef = useRef() const handleAnim = () => { setTimeout(() => { const copyWords = [ ...words ]; const firstElem = copyWords.splice(1) wrapperRef.current.style.transition = 'none'; wrapperRef.current.style.top = '0px' setWords([ ...firstElem.concat(copyWords) ]) },1000); wrapperRef.current.style.transition = '0.5s'; wrapperRef.current.style.top = '-70px' } useEffect(() => { setTimeout(() => { handleAnim() }, 2000); }) return ( <> <div className="test-container"> <div className='test-title'>Hello</div> <div className='text-container-word'> <div ref={wrapperRef} className='text-container-word-wrapper'> <span className='text-word'>{words[0]}</span> <span className='text-word'>{words[1]}</span> </div> </div> </div> <style jsx> {` .test-container { padding: 100px 0; width: 100%; display: flex; } .test-title { font-size: 48px; font-weight: bold; color: blue; } .text-container-word { position: relative; width: 200px; height: 70px; background-color: green; display: inline-block; overflow: hidden; margin-top: -7px; } .text-container-word-wrapper { height: auto; position: relative; top: 0px; } .test-container h1 { position: relative; display: inline; padding: 10px; } .text-word { height: 70px; font-size: 48px; font-weight: bold; display: block; transition: 0.5s; line-height: 70px; } `} </style> </> ) } export default Version1