Red dots when using Scrollagic js library

Hi!

I found this thread:


Which describes a similar problem. I’m using the js library ScrollMagic hosted on cloudflare.

image

I would think that there is something wrong with how I imported it, I’m very new to all of this so maybe there is, but I have seen my JS code work 10% of the time. I edited width attribute in css, and when I refreshed the page, my scrollmagic triggers appeared and functioned. When I refreshed the page again after not changing anything, the scrollmagic triggers did not appear, which lead me to believe it is a glitch issue. Is there a solution to this or should I just use another coding program?

The other thread said something about using /* global google */

Here is my project: https://glitch.com/~cwi-rails

Thank you!

I just looked through index.html file, and I believe the code has a problem.

Your index.html loads /script.js on line 9, inside <head>:

<head>
  ...
  <script src="/script.js"></script>
  ...
</head>

Then it loads some library code from cdnjs and then loads /script.js again, at the bottom of <body>. The first <script> is also totally wrong.

...
<script>
  src =
    "https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js";
  integrity = "sha256-peenofh8a9TIqKdPKIeQE7mJvuwh+J0To7nslvpj1jI=";
  crossorigin = "anonymous";
</script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"
  integrity="sha256-2p2tRZlPowp3P/04Pw2rqVCSbhyV/IB7ZEVUglrDS/c="
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.velocity.min.js"
  integrity="sha256-IP/usbYnTYjqGgX3mkFOa7EhicdRZRTHUGfQgdzUeBk="
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"
  integrity="sha256-XBVALc3QsDSQiDtiaBwNZ2rxCJTHzlUhhlDQ84J8bw8="
  crossorigin="anonymous"
></script>
<script src="/script.js"></script>
</body>

Here are my suggestions:

  1. Remove the <script> in <head>.
  2. Fix the first <script> in <body> and, since it’s a plugin for ScrollMagic (at least it looks like one), move it below other ScrollMagic scripts, but before /script.js:
...
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"
  integrity="sha256-2p2tRZlPowp3P/04Pw2rqVCSbhyV/IB7ZEVUglrDS/c="
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.velocity.min.js"
  integrity="sha256-IP/usbYnTYjqGgX3mkFOa7EhicdRZRTHUGfQgdzUeBk="
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"
  integrity="sha256-XBVALc3QsDSQiDtiaBwNZ2rxCJTHzlUhhlDQ84J8bw8="
  crossorigin="anonymous"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"
  integrity="sha256-peenofh8a9TIqKdPKIeQE7mJvuwh+J0To7nslvpj1jI="
  crossorigin="anonymous"
></script>
<script src="/script.js"></script>
</body>
1 Like