How do I get the div to continuously follow the typed text?

[allan-vera]

imagine you have a long piece of text that your are typing with the animation. When the div overflows, the view currently will not follow the text, instead it stays in its current position and you have to scroll down to catch up with the latest text written. How can I get it so that text is being followed?

[maxeth]

Hey,

this is CSS or React/Js specific (depending how you wanna handle it). If you want to achieve something similar to ChatGPT you should add a wrapper <div> to the TypeAnimation component with display flex, a fixed height and something like align-items: end. That way, if the type animation component starts overflowing on the y-axis, the latest text should always remain in vision.

Otherwise, if you intend to have an ever-growing paragraph with no fixed parent element, you'd have to pass a ref to the TypeAnimation component, dynamically track its height via ref.current and keep scrolling down using javascript like this

window.scrollTo({ top: yOffset });

where yOffset is determined by the current scroll position and the element height from ref.current.

I would start with this: How to dynamically track height of div in React.js