Item below flickers when item above finishes backspacing

  • Resolved valiant66

    (@valiant66)


    5 years, 9 months ago

    Hi.

    I just installed Typed JS for a very simple landing page.

    It’s got 4 typed items.

    Item 3 has 5 phrases that get typed then deleted.

    Every time Item 3 finishes deleting/starts a phrase, Item 4 flickers.

    This is visually distracting.

    Is there any way to prevent Item 4 from flickering?

    Thanks.

    • This topic was modified 5 years, 9 months ago by valiant66.
    • This topic was modified 5 years, 9 months ago by valiant66.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter valiant66

    (@valiant66)

    Well, this is not a very elegant solution, but it works.

    I turned on the cursor (actually, I customized it to ” |” (that is, space pipe) and then set the cursor colour to the background colour.

    I guess what happens is when the phrase is completely backspaced, item 3 disappears and item 4 moves up, then back down again when the next phrase starts typing, giving the visual effect of flickering. By doing this the item 3 line is never completely blank, so item 4 doesn’t move up. No flicker.

    It works. But it’s a hack, and it wouldn’t work over a complicated background like a gradient or an image.

    • This reply was modified 5 years, 9 months ago by valiant66.
    • This reply was modified 5 years, 9 months ago by valiant66.
    • This reply was modified 5 years, 9 months ago by valiant66.
    Thread Starter valiant66

    (@valiant66)

    Oh, and the cursor cannot just be a space, it has to have an actual character. You probably don’t need the space before |, but I didn’t try that – as soon as it worked well enough I moved on.

    • This reply was modified 5 years, 9 months ago by valiant66.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Item below flickers when item above finishes backspacing’ is closed to new replies.