ScrollMagic ToggleClass Test

Testing ToggleClass

by survivant

HTML

<nav class="side-nav">
  <div class="alignment">
    <a href="#Home" class="home">
      <div class="scaling-svg-container">
        <svg class="scaling-svg">
          <circle cx="10" cy="10" r="7" stroke-width="1" fill="none" />
          <circle cx="10" cy="10" r="5" stroke="none" stroke-width="1" fill="#15A5E3" />
        </svg>
      </div>
    </a>
    <a href="#Overview" class="overview">
      <div class="scaling-svg-container">
        <svg class="scaling-svg">
          <circle cx="10" cy="10" r="7" stroke-width="1" fill="none" />
          <circle cx="10" cy="10" r="5" stroke="none" stroke-width="1" fill="#15A5E3" />
        </svg>
      </div>
    </a>
    <a href="#Projects" class="projects">
      <div class="scaling-svg-container">
        <svg class="scaling-svg">
          <circle cx="10" cy="10" r="7" stroke-width="1" fill="none" />
          <circle cx="10" cy="10" r="5" stroke="none" stroke-width="1" fill="#15A5E3" />
        </svg>
      </div>
    </a>
  </div>
</nav>
<section id="Home">
  <p>
    Home
  </p>
</section>
<section id="Overview">
  <p>
    Overview
  </p>
</section>
<section id="Projects">
  <p>
    Projects
  </p>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>

SCSS

.side-nav {
  position: fixed;
  right: 60px;
  width: 400px;
  height: 100%;
  z-index: 90;
  .alignment {
    position: absolute;
    top: 40%;
    right: 0;
    a {
      position: relative;
      display: block;
      width: 20px;
      margin-bottom: 5px;
      svg {
        display: block;
        stroke: white;
      }
      &.active svg {
        stroke: red;
      }
    }
  }
}

.scaling-svg-container {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
  /* override this inline for aspect ratio other than square */
  .scaling-svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }
}

#Home,
#Overview,
#Projects {
  height: 100vh;
}

#Home {
  background: #b1b1b1;
  color: #333;
}

#Overview {
  background: #343434;
  color: white;
}

#Projects {
  background: #A1A5E6;
  color: white;
}

JavaScript

// Scroll Magic code.
$(function() { // wait for document ready

  // init
  var controller = new ScrollMagic.Controller({globalSceneOptions: {duration: 561}});

  new ScrollMagic.Scene({
      triggerElement: "#Home"
    })
    .setClassToggle(".side-nav a.home", "active")
    .addTo(controller);
    
  new ScrollMagic.Scene({
      triggerElement: "#Overview"
    })
    .setClassToggle(".side-nav a.overview", "active")
    .addTo(controller);
    
  new ScrollMagic.Scene({
      triggerElement: "#Projects"
    })
    .setClassToggle(".side-nav a.projects", "active")
    .addTo(controller);
    
});