As the title suggests, I'm using typewriter-effect package and that gives me a cool typewriter animation.
Yet, Lighthouse thinks it is a sort of layout shift and that counts towards the CLS score. Are there any ways to migrate that besides either ignoring the score or stop using the animation?
My site BTW.
Yes, this is the proper behavior of the Lighthouse with shifting layouts.
To solve the issue you need to consider the section size, so use the width and height in the container of the typewriter section, so the lighthouse knows the size of that element before rendering the whole typewriter section and animations.
For example:
function TypeWriterSection () {
return (
<div className={{height: '350px', width: '500px'}}>
// ...
</div>
)
}