Smooth caret animation (a la Word 2016)


#1

G’day,

I’ve just moved from Windows to (what is obviously now) macOS. I’ve become accustomed to using a feature in Windows apps that most people hate - the animated caret. I love it in Word 2016, and when I was on Windows I used a plug-in to make Visual Code Studio 2015’s cursor behave in a similar manner. After trying many coding apps on the Mac, I haven’t managed to find this feature. Atom looks the most likely candidate for such a plugin given its customization capabilities. Does anybody know of a package that does something like this? Or if not, whether there might be a way to code it. I’m afraid my skills aren’t yet up to scratch for that.

**would be prepared to pay somebody to do it for me. Yes, I am that addicted to it. Sigh.

Thanks


#2

This is actually surprisingly easy to accomplish. See, in Atom everything is defined according to web technologies. The cursor? It’s a div around the character that usually just displays a border on the right-hand side. CSS has fairly robust animation capabilities, so what we can do is drop a transition property on the .cursor class. That rule looks like this:

.cursor, atom-text-editor::shadow .cursor {
  transition: 150ms;
}

Put that in your styles.less, save it, and then adjust the transition time until you’re happy with how the cursor moves. That’s literally all it takes, unless you have a problem with the cursor sliding across the screen for .15 seconds whenever you click somewhere (I think it looks cute). If you want to get rid of the slide, it’s probably possible to force the deletion of a previous cursor and create a new one whenever Atom would move the existing cursor.

Edit: In private messages with @vexxedred, the above tweak was refined with a bezier curve that keeps the visual cursor ahead of the text when the user is typing quickly. This creates a subtle bounce effect in other cases, but isn’t too distracting. As before, the transition time should be customized for each user. The tool used to create the curve can be found here.

.cursor, atom-text-editor::shadow .cursor {
  transition: 150ms cubic-bezier(.03,1.71,.33,.97);
}

#3

Bumping this topic to add that the shadow DOM was removed from Atom since I made the above post. Currently and going forward, all you need to tweak your cursor’s CSS is the first selector:

.cursor {
  transition: 150ms;
}