Create Animated Input Insertion Caret – smoothCaret.js

Preview:

Description:

smoothCaret.js is an ultra-light JavaScript library for creating smoothly animated insertion caret (cursor) in text fields.

How to use it:

1. Download and load the smoothCaret.min.js library in the document.

<script src="smoothCaret.min.js" defer></script>

2. Add the data-sc attribute and smoothCaretInput class to the target input fields.

<div class="sc-container">
  <input data-sc="" class="smoothCaretInput" placeholder="type something..." type="text" >
</div>
<div class="sc-container">
  <input data-sc="" class="smoothCaretInput" placeholder="type something..." type="password" >
</div>

3. Add custom carets to the input fields.

<div class="sc-container">
  <input data-sc="" class="smoothCaretInput" placeholder="type something..." type="text" >
    <div class="caret" style="width: 2px; height: 60%; background-color: #00a6ff;" ></div>
</div>
<div class="sc-container">
  <input data-sc="" class="smoothCaretInput" placeholder="type something..." type="password" >
  <div class="caret" style="width: 2px; height: 60%; background-color: #ff5a5a;" ></div>
</div>

Changelog:

09/08/2022

• Added support for letter-spacing

09/05/2022

• Support Safari

09/01/2022

• Added optimization