back space

[JEREMIA-SUNNY]

how can i avoid the back space effect instead come to new line

[maxeth]

What exactly would you like to do? If you'd like to write multiple lines, you'd have to orchestrate a set of animations with react (conditional rendering & changing state with callback functions).

Maybe try something like this:

const animationSteps = [
  { index: 0, text: 'This is the 1st line' },
  { index: 1, text: 'This is the 2nd line' },
  { index: 2, text: 'This is the 3rd line' },
  { index: 3, text: 'This is the 4th line' },
];

const [animationState, setAnimationState] = useState(0);

return (
      <div style={{ height: '300px' }}>
          {animationSteps.map((el) => (
            <>
              {animationState === el.index ? (
                <TypeAnimation
                  style={{ fontSize: '1.5em' }}
                  sequence={[
                    el.text,
                    () => {
                      setAnimationState(el.index + 1);
                    },
                  ]}
                  wrapper="div"
                />
              ) : animationState >= el.index + 1 ? (
                <div style={{fontSize:"1.5em"}}>{el.text}</div>
              ) : null}
            </>
          ))}
        </div>
)

https://user-images.githubusercontent.com/48837036/189499115-6bc28b99-156b-4621-8d66-52773e7396f6.mov

[jakajancar]

(I think) I have the same question as the OP. Not really looking for multi-line text, just to skip the (time-consuming attention-losing) deletion:

This
This is
This is the
This is the first
This is the first line
[instantly, no backspace animation]
And
And this
And this is
And this is the
And this is the second
And this is the second line

Alternatively, a separate speed for deletion than writing.

[maxeth]

(I think) I have the same question as the OP. Not really looking for multi-line text, just to skip the (time-consuming attention-losing) deletion:

This
This is
This is the
This is the first
This is the first line
[instantly, no backspace animation]
And
And this
And this is
And this is the
And this is the second
And this is the second line

Alternatively, a separate speed for deletion than writing.

Hey, I just added a deletionSpeed prop. Is this what you were looking for? If so, I will publish this change ASAP.

https://user-images.githubusercontent.com/48837036/197349380-34b13124-4789-4bb6-8e61-d1b0a7731e1b.mov

[maxeth]

@jakajancar This is how it would look like for your example with no delay after writing:

 <TypeAnimation
            sequence={[
              'This is the first line',
              'And this is the second line',
            ]}
            wrapper="span"
            speed={60}
            deletionSpeed={99}
            style={{ fontSize: '2em' }}
            repeat={Infinity}
          />

https://user-images.githubusercontent.com/48837036/197355390-40c78233-0c88-4afd-a072-d75b39d1a3df.mov

There's still an animation to be seen, but that's the least animation duration I can achieve without completely omitting the animation. I could also try implementing no animation at all but I think it would look unnatural.

[jakajancar]

Frankly that fast deletion looks worse/more distracting than I expected :/

Not sure infinite deletion speed is unnatural, after all in normal use you would probably also do cmd-a + backspace instead of holding backspace.

Perhaps deletionSpeed=Number.Infinity?

Alternately, maybe a type of step that does an instant adjustment vs. animated one? As in, maybe the step is {text?: string, speed?: number} and one can do {text: '', speed: Infinity}.

[maxeth]

@jakajancar

(Optionally) Completely omitting the animation would take some more changes so I won't be able to do it right now, but I'll look into it the coming days.

Speed of Infinity won't do it because the package uses native browser animations via requestAnimationFrame, so there's always at least some animation duration. The animation above already has a delay of 0ms and there's still an animation to be seen.

[maxeth]

@jakajancar

I have implemented an omitDeletionAnimation prop in v2.1.2 to have no deletion-animation at all, and it looks like this:

https://user-images.githubusercontent.com/48837036/198837058-e2a2c78b-11f5-40a0-ba23-46cc06928174.mov

[jakajancar]

This looks great to me, thanks!