Open salesp07 opened 9 months ago
Hey,
there's a small docs section about CSS caveats, maybe that's useful. You can define fixed dimensions for the animation via css or the style
prop as shown here.
<TypeAnimation
style={{ height: '195px', display: 'block' }} // Set a fixed height to not shift other elements vertically
/>
In addition to defining a fixed width/height, it's important you set display as block
or inline-block
.
On a side note: I don't quite understand what that fixed
prop does. How can we have a fixed size if we don't set it explicitly via CSS?
Hey @maxeth , thx for the reply.
Not exactly what I was looking for, since it would be very hard to make the container responsive with a fixed height.
As far as I understand, on react-typewriter, they have visible and invisible characters; and invisible characters can have one of 2 styles depending on the fixed
prop, display: none
or visibility:hidden
, with the latter allowing the enclosing container to have a fixed responsive height from the start of the animation.
However, I haven't had the chance to see the innner workings of this module, so feel free to close this issue if it's not feasible to implement.
@salesp07
Thanks for explaining. Seems pretty useful, and it would theoretically be possible to add such a prop.
Maybe for now you could try rendering the <TypeAnimation/>
with position style={{position: "absolute"}}
and the longest possible string of the sequence as a separate, transparent div, within the same parent element to simulate that behaviour.
So something like this:
<div style={{position:"relative"}}>
<TypeAnimation style={{position:"absolute"}}/>
<div style={{opacity: "0"}} aria-hidden={true}>Longest possible sequence here</div>
</div>
I'm not sure if this is possible because it might have been built differently, but I was looking for something like the
fixed
prop from react-typewriter. Something that would pre-render the space needed for the text to prevent items below the typing component to get pushed down in the case of multiline text (or even single line text - there is a small tilt from 0 lines to 1 line).