Cursor Smooth Caret Animation

Plugins ideas
1

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.

11 Likes
2

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.

3

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
4

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.

5

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;
}
2 Likes
6

This solution does not work for those using vim mode

I have found it can be replaced with

.cm-cursor-primary {
  transition: all 80ms;
}
2 Likes
7

Just as a bit of a warning after updating my version to 14.15 of Obsidian the snippet code has stopped working in my use-case, I tried all the different updated varients as well. I don’t know why this has happened, but I am trying to find a work-around for it.

8

Yeah, the snippet stopped working for me too. Any ideas?

9

I saved this code as a css file and enabled it in css snippet in obsidian but the animation is not working. Can u please drop a tutorial or somthing. Thanks

10

I would also appreciate this feature.

11

I found out that now you can change the cursor color but nothing else, which is quite unfortunate for what we want here.

BUT! I also found something interesting, when selecting text by pressing SHIFT and move cursor with arrow keys, the cursor behaves like with Smooth Caret Animation! This maybe has something to do with the CodeMirror (Options to modify cursor style - #17 by OlivierPS)
Does it indicate anything useful?

13

Hello, thanks for sending this. I’ll be honest I’ve tried many times to get it working again and it seems that you basically cannot achieve this only by using a CSS snippet.

Though using information from the thread you linked I’ve been able to mess around and get it working again. In its current form, it’s quite janky so like last time I hope others more knowledgeable about coding add their suggestions as well.

Guide:

  1. You will need to get the Ninja cursor plugin for this to work and have it enabled.

The way the snippet works is that it hides the regular cursor and styles the Ninja cursor instead.

  1. Create a CSS Snippet, add the code below, and then enable the CSS Snippet in Obsidian.
/* Styling for the Ninja Cursor*/
.theme-dark .x-cursor {
  background: white;
  width: 1px;
  transition: all 80ms !important;
  transition: opacity;
  top: calc( -2.5px - var(--header-height));;
  height: calc(2.5px + var(--cursor-height));
}

.theme-light .x-cursor {
  background: black;
  width: 1px;
  transition: all 80ms !important;
  transition: opacity;
  top: calc( -2.5px - var(--header-height));;
  height: calc(2.5px + var(--cursor-height));
}

/* Hides Regular Cursor when Highlighting Text*/
body:has(.x-cursor) .cm-editor * {
  caret-color: transparent;
}

/* Disable movement effect */
.cursorWrapper .x-cursor::after {
  display: none;
}

/* Remove normal cursor on text selection */
.cm-cursorLayer {
  animation: none !important;
}

/* Blinking */
.cursorWrapper .x-cursor0 {
animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
  animation: blink1 1s 1s both infinite;
}

@keyframes blink1 {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 0.3;}
  95%  { opacity: 0; }
  100% { opacity: 0.3; }
}

@keyframes blink0 {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 0.3;}
  95%  { opacity: 0; }
  100% { opacity: 0.3; }
}

Also, I would haven’t been able to do this without using the code that BramleBrain posted, so many thanks to them! Options to modify cursor style - #44 by BrambleBrain.

Anyway, let me know if it works for you!

3 Likes
14

smooth cursor

I think 80ms is too fast and the effect isn’t apparent. Depending on how fast you type somewhere between 150ms and 200ms seems to be the sweet spot. 500ms without further modification to the code appears to be too slow and causes the cursor to lag behind the text

2 Likes
15

Yeah, I agree. The 80ms delay of the transition is purely because that is what was used in the Chrome extension I took inspiration from when you could do this all just in a CSS Snippet.

Thanks for the suggestion!

16

This works for me! Elegant solution. Thought it was impossible to achieve for latest version of Obsidian, then I tried your method and it magically works!