マウスポインターを追従するようにしたい

Question

  <div class="follower"></div>

.follower {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: none;
  pointer-events: none;

}



.follower {
  width: 8px;
  height: 8px;
  background-color: #ddd;
  z-index: 1000;
}

  $(function() {

      //      HTML SCSS JSResult
      // EDIT ON
      var
        cursor = $(".cursor"),
        follower = $(".follower"),
        cWidth = 8, 
        fWidth = 40, 
        delay = 10, 
        mouseX = 0, 
        mouseY = 0, 
        posX = 0, 
        posY = 0; 

  
      TweenMax.to({}, .001, {
        repeat: -1,
        onRepeat: function() {
          posX += (mouseX - posX) / delay;
          posY += (mouseY - posY) / delay;

          TweenMax.set(follower, {
            css: {
              left: posX - (fWidth / 2),
              top: posY - (fWidth / 2)
            }
          });

          TweenMax.set(cursor, {
            css: {
              left: mouseX - (cWidth / 2),
              top: mouseY - (cWidth / 2)
            }
          });
        }
      });



      $(document).on("mousemove", function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
      });

      $("a").on({
        "mouseenter": function() {
          cursor.addClass("is-active");
          follower.addClass("is-active");
        },
        "mouseleave": function() {
          cursor.removeClass("is-active");
          follower.removeClass("is-active");
        }
      });
    });

マウスポインターが通常の矢印のものプラス追従する形でグレーの点をつけたいのですが、矢印のマウスポインターに
ドットがついてこないで動かない状態なので、追従する様にしたいです。
ご回答よろしくお願いいたします。

Comments

[Lhankor_Mhy]

TweenMax と jQuery を読み込んでいる部分と、ご提示のコードを読み込んでいる部分のコードをご提示ください。
また、エラーメッセージをご提示ください。

[退会済みユーザー]

TweenMax と jQueryは
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

エラーメッセージは
Failed to load resource: net::ERR_INVALID_URL
jquery.min.js:2 jQuery.Deferred exception: TweenMax is not defined ReferenceError: TweenMax is not defined
at HTMLDocument.<anonymous> (file:///Users/asaiyouhei/Documents/%E3%83%86%E3%83%B3%E3%83%95%E3%82%9A%E3%83%AC%E3%83%BC%E3%83%88/%E3%83%88%E3%83%83%E3%83%95%E3%82%9A%E3%83%98%E3%82%9A%E3%83%BC%E3%82%B7%E3%82%99%E3%82%B3%E3%83%BC%E3%83%86%E3%82%99%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99/index.html:296:7)
at j (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948)
at k (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 jQuery.Deferred exception: timer is not defined ReferenceError: timer is not defined
at HTMLDocument.<anonymous> (file:///Users/asaiyouhei/Documents/%E3%83%86%E3%83%B3%E3%83%95%E3%82%9A%E3%83%AC%E3%83%BC%E3%83%88/%E3%83%88%E3%83%83%E3%83%95%E3%82%9A%E3%83%98%E3%82%9A%E3%83%BC%E3%82%B7%E3%82%99%E3%82%B3%E3%83%BC%E3%83%86%E3%82%99%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99/index.html:390:13)
at j (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948)
at k (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught ReferenceError: TweenMax is not defined
at HTMLDocument.<anonymous> (index.html:296)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
(anonymous) @ index.html:296
j @ jquery.min.js:2
k @ jquery.min.js:2
jquery.min.js:2 Uncaught ReferenceError: timer is not defined
at HTMLDocument.<anonymous> (index.html:390)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
(anonymous) @ index.html:390
j @ jquery.min.js:2
k @ jquery.min.js:2
です。長くてすいませんがよろしくお願いします。

[Lhankor_Mhy]

質問に追記することをお勧めします。

Answer 1

当方で試したところ、問題なく動作しました。

補足でご提示いただいたエラーコードを拝見すると、TweenMaxが読み込めていないように見えます。
また、環境はローカルで、HTMLをダブルクリックするなどして実行しているように見えました。

そこで、以下のようにすると解決しませんか？

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

↓

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Comments

[退会済みユーザー]

ありがとうございます。動きました！
これはhttpsを加えることで外部ファイルから読み込んでいることになりローカルでも動くという理由でしょうか。

[Lhankor_Mhy]

そのとおりです。

プロトコルを省略すると、HTMLと同じプロトコルと解釈されます。
https://qiita.com/arai-wa/items/d9b73539898d658b58c5
つまり、
file://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
にアクセスしてしまう、ということです。

[退会済みユーザー]

なるほど、勉強になりました。ありがとうございます。