단어를 별도의 HTML 요소로 분할하여 애니메이션을 통해 개별적으로 배치할 수 있는 일반적인 기술을 재현하려고 합니다.
제가 겪고 있는 문제는 단어를 별도의 요소로 분리할 때 단어 사이의 간격이 사라진다는 것입니다. 각 단어 뒤에 를 사용하여 렌더링하거나 각 요소에 패딩을 추가하여 간격을 추가할 수 있지만 컨테이너에 간격을 수동으로 추가/구부리지 않고 이 작업을 수행하고 원래 간격을 유지할 수 있는지 궁금합니다.
gsap SplitText와 같은 플러그인이 있다는 것을 알고 있지만 플러그인이 아닌 솔루션을 원했습니다.
코드펜이 왔습니다.
const App = () => {
const line = 'this is a line of text.';
const renderLine = line.split(' ').map((word, i) => {
return (
<span key={i}>{word} </span>
)
})
return (
<h1>{renderLine}</h1>
)
}