Search code examples
cssanimationcursorsmoothingcaret

Is there any way to make cursor smooth caret animation like VSCode while typing?

I want to make cursor smooth caret animation effect like Visual Studio Code

So I searched on google about it but I din't find expected answer. If you still don't understand what I am talking about kindly watch this video

I really want to add this effect on my website

I tried

* {
   transition: all 80ms;
}

But it didn't work :(

Solution

  • This is what I use for my vscode. Just install Custom CSS and JS Loader and follow the installation instruction then put this css in your css file that you will link while following the extension instruction.

    .monaco-editor .cursors-layer.cursor-smooth-caret-animation > .cursor {
    transition: all 0.17s !important;
}

    transition: all 80ms is the default style used by VScode. You can try setting from 0.15s to 0.2s so it will look smooth.