javascript - Jquery SVG circle navigation

Question

The navigation works well, but the active status should show in a better way:

-- If the circle was active it stay active.(

-- Going back the a class active goes.

so, if page down remain active if page up(going back) remove active class.

At the moment just a a class active works,

I hope makes sense. Please ask question, this is a really nice animation but need a bit of more work.

I will post the code with a Demo.

Also . FIDDLE

$(document).ready(function() {
  
  var $half = $(".circle .half"),
      halfLen = $half[0].getTotalLength(),
      $nav = $(".circle .active-nav"),
      navLen = $nav[0].getTotalLength(),
      $pages = $(".pages"),
      scrolling  = false,
      curPage = 1,
      numOfPages = $(".page").length,
      headingH = $(".heading").height(),
      SPHASE1 = 500,
      SPHASE2 = 300,
      SPHASE3 = 900,
      SDELAY = SPHASE1 + SPHASE2 + SPHASE3,
      SDUR = 500,
      SDOTS = SDELAY + SDUR,
      DOTTRANSTIME = 300,
      SDOTSRDY = SDOTS + DOTTRANSTIME + (numOfPages - 2) * 100,
      PAGETRANSITION = 500;
  
 
   TweenMax.to($half, .5, {strokeDasharray: halfLen, strokeDashoffset: halfLen,  ease:Power1.easeOut}, 0)
  TweenMax.to($nav, .5, {strokeDasharray: navLen, strokeDashoffset: navLen,  ease:Power1.easeOut}, 0)

  
  $half.delay(SDELAY).velocity({strokeDashoffset: 0}, {duration: SDUR, easing: "ease-in"}); 
  
  setTimeout(function() {
    $(".nav-el").addClass("showing visible");
  }, SDOTS);
  
  setTimeout(function() {
    $(".nav-el").removeClass("showing").addClass("white");
    $(".nav-el-1").addClass("active");
    $(".heading").removeClass("invisible");
    $pages.removeClass("removed");
    
    setTimeout(function() {
      activateHandlers();
    }, PAGETRANSITION + 300);
  }, SDOTSRDY);
  
  function pagination(page) {
    scrolling = true;
    curPage = page;
    $(".nav-el").removeClass("active");
    $(".nav-el-" + page).addClass("active");
    var newNavLen = navLen - navLen / 5 * (page - 1); 
   
    $nav.velocity({strokeDashoffset: newNavLen}, {duration: PAGETRANSITION});
    
    $(".numbers").css("transform", "translateY("+ (0 - (page - 1) * headingH) +"px)");
    $pages.css("transform", "translate3D(0,"+ (0 - (page - 1) * 100) +"%,0)");
    
    setTimeout(function() {
      scrolling = false;
    }, PAGETRANSITION);
    
    if($(".nav-el-").hasClass('active')){
      console.log('if active') 
    }else{
      console.log('else active') 
    }
    
  }
  
 
  function activateHandlers() {
 

    $(document).on("click", ".nav-el", function() {
      var pg = +$(this).attr("data-page");
      pagination(pg);
    });
    
 

    $(window).resize(function() {
      headingH = $(".heading").height();
    });
    
  }
  
  var diff = 0;
  
 
});

@font-face {
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/polar.otf");
  font-family: Polar;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
}

.instant {
  transition: all 0 0 !important;
}

html, body {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
  background: #90CAF9;
}
@media (max-width: 960px) {
  html, body {
    font-size: 50%;
  }
}
@media (max-width: 768px) {
  html, body {
    font-size: 40%;
  }
}
@media (max-width: 480px) {
  html, body {
    font-size: 30%;
  }
}

.scene {
  position: relative;
  height: 100%;
}

.circle {
  z-index: 4;
  position: fixed;
  top: calc(50% - 20rem);
  left: calc(50% - 20rem);
  width: 40rem;
  height: 40rem;
  opacity: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.rotater {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500rem;
  height: 500rem;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  background: #020202;
  border-radius: 50%;
}
.rotater.phase1 {
  width: 0.1rem;
  height: 0.1rem;
  transition: width 0.5s, height 0.5s;
}
.rotater.phase2 {
  width: 2.5rem;
  height: 2.5rem;
  transition: width 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), height 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.rotater.phase3 {
  width: 1rem;
  height: 1rem;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);
          transform: translateX(-50%) translateY(-50%) rotate(180deg);
  transition: width 0.1s, height 0.1s, opacity 0.4s 1.3s, -webkit-transform 0.6s 0.87s ease-in;
  transition: width 0.1s, height 0.1s, transform 0.6s 0.87s ease-in, opacity 0.4s 1.3s;
  transition: width 0.1s, height 0.1s, transform 0.6s 0.87s ease-in, opacity 0.4s 1.3s, -webkit-transform 0.6s 0.87s ease-in;
  opacity: 0;
}
.rotater.phase3 .rotater--line {
  max-width: 20rem;
}
.rotater.phase3 .rotater--line:after {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.rotater--line {
  position: absolute;
  top: calc(50% - 0.1rem);
  left: 50%;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  width: 20rem;
  max-width: 0;
  height: 0.2rem;
  background: #020202;
  transition: max-width 0.5s 0.1s;
  will-change: max-width;
}
.rotater--line:after {
  content: "";
  position: absolute;
  top: -0.4rem;
  left: 19.4rem;
  width: 1rem;
  height: 1rem;
  background: #020202;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: -webkit-transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
  transition: transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
  transition: transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.2s 0.55s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.rotater--line.left {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.nav-elems {
  z-index: 5;
  position: fixed;
  top: calc(50% - 20rem);
  left: calc(50% - 20rem);
  width: 40rem;
  height: 40rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.heading {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 9rem;
  width: 40rem;
  height: 9rem;
  line-height: 1;
  font-family: Polar;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  margin-left: -3rem;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
          transform: translateX(-50%) translateY(-50%) scale(1);
  overflow: hidden;
  transition: opacity 0.3s 0.7s, -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
  transition: opacity 0.3s 0.7s, transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
  transition: opacity 0.3s 0.7s, transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
.heading.invisible {
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
          transform: translateX(-50%) translateY(-50%) scale(0);
}

.numbers {
  position: absolute;
  top: 0;
  right: 5rem;
  width: 1rem;
  display: inline-block;
  vertical-align: top;
  height: 90rem;
  line-height: 1;
  word-break: break-all;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
  will-change: transform;
}

.nav-el {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #020202;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: background-color 0.7s, -webkit-transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
  transition: transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), background-color 0.7s;
  transition: transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46), background-color 0.7s, -webkit-transform 0.3s cubic-bezier(0.72, 0.17, 0.68, 1.46);
  cursor: pointer;
}
.nav-el:after {
  content: "";
  position: absolute;
  top: calc(50% - 0.2rem);
  left: calc(50% - 0.2rem);
  width: 0.4rem;
  height: 0.4rem;
  background: #020202;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.nav-el.visible {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.nav-el.white {
  background: #fff;
}
.nav-el.active, .nav-el:hover {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.nav-el.active:after, .nav-el:hover:after {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.nav-el-1 {
  left: 19.5rem;
  top: -0.4rem;
}
.nav-el-1.showing {
  transition-delay: 0s;
}

.nav-el-2 {
  left: 38.42602rem;
  top: 13.35056rem;
}
.nav-el-2.showing {
  transition-delay: 0.1s;
}

.nav-el-3 {
  left: 31.19693rem;
  top: 35.59944rem;
}
.nav-el-3.showing {
  transition-delay: 0.2s;
}

.nav-el-4 {
  left: 7.80307rem;
  top: 35.59944rem;
}
.nav-el-4.showing {
  transition-delay: 0.3s;
}

.nav-el-5 {
  left: 0.57398rem;
  top: 13.35056rem;
}
.nav-el-5.showing {
  transition-delay: 0.4s;
}

.pages {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
  will-change: transform;
}
.pages.removed {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.pages.removed .scroll-down {
  -webkit-transform: scale(0);
          transform: scale(0);
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
}
.page:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.page.page-1 {
  position: relative;
  background: #F44336;
}
.page.page-2 {
  background: #009688;
}
.page.page-3 {
  background: #3F51B5;
}
.page.page-4 {
  background: #FFA726;
}
.page.page-5 {
  background: #795548;
}
.page.page-6 {
  background: #607D8B;
}
.page.page-7 {
  position: relative;
  background: #000000;
  padding: 10rem;
}

.scroll-down {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(1);
          transform: translateX(-50%) scale(1);
  font-size: 5rem;
  font-family: Polar;
  color: #fff;
  transition: -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
  transition: transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
  transition: transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.3s 0.7s cubic-bezier(0.72, 0.17, 0.68, 1.46);
}
@media (max-width: 768px) {
  .scroll-down {
    display: none;
  }
}
@media (max-height: 610px) and (min-width: 769px) {
  .scroll-down {
    display: none;
  }
}

.check-out {
  z-index: 10;
  position: relative;
  font-size: 5rem;
  font-family: Polar;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.2.0/velocity.min.js"></script>

<div class="scene">
  
  <svg class="circle" viewBox="0 0 400 400">
    <path class="half" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none" d="M1,200 a199,199 0 0,1 398,0"/>
    <path class="half" stroke="rgba(255,255,255,0.5)" stroke-width="2" fill="none" d="M399,200 a199,199 0 0,1 -398,0"/>
    <path class="active-nav" stroke="#fff" stroke-width="2" fill="none" d="M200,1 a199,199 0 0,1 0,398 a199,199 0 0,1 0,-398"/>
  </svg>
  
  
  
  <div class="rotater">
    <div class="rotater--line left"></div>
    <div class="rotater--line right"></div>
  </div>
  <div class="nav-elems"> 
    <div data-page="1" class="nav-el nav-el-1"></div>
    <div data-page="2" class="nav-el nav-el-2"></div>
    <div data-page="3" class="nav-el nav-el-3"></div>
    <div data-page="4" class="nav-el nav-el-4"></div>
    <div data-page="5" class="nav-el nav-el-5"></div>
  </div>
  <div class="pages removed">
    <div class="page page-1">
      <p class="scroll-down">Scroll down</p>
    </div>
    <div class="page page-2"></div>
    <div class="page page-3"></div>
    <div class="page page-4"></div>
    <div class="page page-5"></div>
  </div>
</div>

标签： javascriptjquerygsap