Cursor Smooth Caret Animation

Use case

Cursor smooth caret animation refers to the smooth movement of cursors when a new character is typed.

I recently found this function in VS Code. And typing with this feature enabled becomes such a joy that I cannot help but write to request an implementation in Obsidian.

Proposed solution

Add a transition animation to cursor when it moves. A sample video is given in the link.

3 Likes

Hi, I’d like to second this feature request - not sure why but I’m much more confident / faster typing in something like word with a smooth cursor feature and the ‘jumping cursor’ used in obsidian really throws me off. Smooth cursors are implemented in almost every program and it would be a great QOL improvement.

How to get Cursor Smooth Caret in Obsidian
I also wanted to get this style of typing, so I went looking around and found an extension for docs, I know, but it quite nicely laid out how its style was achieved using CSS and HTML.

Basically, put this code into a CSS snippet and enable it:

* {
    transition: all 80ms;
}

This can then be enabled or disabled at your own discretion and should work with any theme. Note that it may not work well with extensions.

2 Likes

Just wanted to say that this works amazingly! Thank you so much; it’s just a small thing but this had been frustrating me since switching over to Obsidian.

Update: since using this snippet I’ve had some issues where scrolling through long pages causes glitching and random returns to the start of the page. Not sure how general this problem is but thought I’d post a fix I found in case anyone else has this problem.

Just replace the above code with this and you should be fine:

.CodeMirror-cursor,
.cm-s-obsidian .cm-cursor {
  transition: all 80ms;
}
1 Like

This solution does not work for those using vim mode

I have found it can be replaced with

.cm-cursor-primary {
  transition: all 80ms;
}
1 Like