title: Custom Cursor with Typecsript
body: <p>My intention is to implement a custom cursor, which I got from here:</p>
  
  <blockquote>
    <p><a href="https://codepen.io/designcourse/pen/GzJKOE" rel="nofollow noreferrer">https://codepen.io/designcourse/pen/GzJKOE</a></p>
  </blockquote>
  
  <p>I've currently got it working on another project, which uses Javascript. My problem is that I've started working with Angular which uses Typescript and I don't know how to implement this cursor with Typescript. Any suggestions?</p>
  
  <pre><code>&lt;div class="cursor"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre><code>.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    animation: cursorAnim .5s infinite alternate;
    pointer-events: none;
  }
  
  .cursor::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 8px solid gray;
    border-radius: 50%;
    opacity: .5;
    top: -8px;
    left: -8px;
    animation: cursorAnim2 .5s infinite alternate;
  }
  
  @keyframes cursorAnim {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(.7);
    }
  }
  
  @keyframes cursorAnim2 {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(.4);
    }
  }
  
  @keyframes cursorAnim3 {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(3);
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  
  .expand {
    animation: cursorAnim3 .5s forwards;
    border: 1px solid red;
  }
  </code></pre>
  
  <pre><code>        const cursor = document.querySelector('.cursor');
  
          document.addEventListener('mousemove', e =&gt; {
              cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
          })
  
          document.addEventListener('click', () =&gt; {
              cursor.classList.add("expand");
  
              setTimeout(() =&gt; {
                  cursor.classList.remove("expand");
              }, 500)
          })
  </code></pre>