Feat: Add static string before or after animated string

[AmreeshTyagi]

One or two properties can be added to accept static string which can be appended before or after animated string.

example use case:

For: Developers
For: Freelancers
For: Professionals

In this case, I would like to fix For: and animated rest of the string.

[maxeth]

Hey,

check out the first "text-continuation" example at https://react-type-animation.vercel.app/

If you do something like:

<TypeAnimation
    sequence={['For: Developers', 1000, 'For: Freelancers', 1000, 'For: Professionals' ]}
  />

The 'For:' will only be typed once and stay static for all the other parts of the sequence, so having a static string before the animation is already supported if that's what you mean.

Regarding the static string after the animation: It would be pretty hard to implement because now the animation only writes or deletes and does not "skip" characters to type "somewhere else" (in this case at the start because the end would be static), and it would also look very unnatural (except for RTL languages maybe?) so I don't think that feature will be added, but I may look into it in the future.

[AmreeshTyagi]

Thanks for the quick response. It worked for appending string before animation. Yes. It seems hard to append after animation.

My use for after was something like this:

SEND | MORE
CONNECT | MORE

Anyway thanks. It will also work for my use case for now. Closing this issue.

[maxeth]

I think you could simply set wrapper="span" to achieve that:

<div>
<TypeAnimation
    sequence={[
    "SEND",
    "CONNECT"
    ]}
    style={{ fontSize: '2em' }}
    wrapper="span" 
    repeat={Infinity}
  /> 
  <span style={{fontSize: '2em'}}>MORE</span>       
</div>

This will render the following: <div> <span>{SEQUENCE}</span> <span>MORE</span> </div> so it will be inline and look like one single text, but the 'MORE' part will not be animated at all, so this may not be what you're looking for.

This will cause a layout shift when writing/deleting, but you could set a fixed width for the TypeAnimation component or set its position to absolute via CSS to prevent layout shift from happening at all.

[AmreeshTyagi]

Thanks. :) Will try this. Actually I updated my content to freeze first word as per your first comment.