title: make SVG as a timeline
body: <p>i' m trying to make a circular timeline with SVG.
  i m using a fullpage js 
  so i made a blue line working progressivly on scroll around the circle but now i want that my anchors dash array appears too but i can t find the solution, i want my anchors appear and stay when i scroll down ( like a timeline ) and come back to grey when scroll up </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
     $('#fullpage').fullpage({
      anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
      menu: '#menu',
      scrollingSpeed: 1000,  
                  onLeave: function(index, nextIndex, direction){
                    $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1))); 
         }
   
         });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#timeline{
   position:fixed;
   width:500px;
   height:500px;
   top:50%;
   left:50%;
   margin-top:-250px;
   margin-left:-250px;
   pointer-events: all;
   z-index:99;
  }
  
  
  #greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
   stroke:rgba(204,204,204,1);
  }
  #bluecircle{
   stroke-dasharray:1510;
   stroke-dashoffset:1510;
   -webkit-transition:all 1s ease;
   transition:all 1s ease;
  }
  
  #smallblueleft, #smallbluebottom, #smallblueright{
     stroke-dasharray:40;
   stroke-dashoffset:40;
    -webkit-transition:all 1s ease;
   transition:all 1s ease;
  }
  
  #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
   stroke-dashoffset:0;
  }
   /********** section ************/
   
  
  .fp-section {
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
   text-align:center;
  }
  
  .fp-section.fp-table, .fp-slide.fp-table {
      display: table;
      table-layout:fixed;
      width: 100%;
  }
  .fp-tableCell {
      display: table-cell;
      vertical-align: middle;
      width: 100%;
      height: 100%;
  }
  
  .fp-scrollable {
      overflow: scroll;
  }
  .fp-notransition {
      -webkit-transition: none !important;
      transition: none !important;
  }
  
  h2{
   font-size: 2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"&gt;&lt;/script&gt;
  
  
   &lt;div id="timeline"&gt;
   
     &lt;svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500"&gt;
  &lt;circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/&gt;
  
  &lt;circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/&gt;
  
  &lt;circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/&gt;
  
  &lt;circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/&gt;
  
  &lt;circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/&gt;
  
  &lt;circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/&gt;
  
  &lt;a data-offset="0" xlink:href="#firstPage"&gt;&lt;circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/&gt;&lt;/a&gt;
  
  &lt;a data-offset="1132.5" xlink:href="#secondPage"&gt;&lt;circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/&gt;&lt;/a&gt;
  
  &lt;a data-offset="755" xlink:href="#3rdPage"&gt;&lt;circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/&gt;&lt;/a&gt;
  
  &lt;a data-offset="377.5" xlink:href="#4thPage"&gt;&lt;circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/&gt;&lt;/a&gt;
        &lt;/svg&gt;
  
   &lt;/div&gt;
    
    &lt;div id="fullpage"&gt;
   &lt;div class="section " id="accueil"&gt;
          &lt;h2&gt;first&lt;/h2&gt;
     
   &lt;/div&gt;
   &lt;div class="section" id="don"&gt;
     &lt;h2&gt;second&lt;/h2&gt;
  
   &lt;/div&gt;
   &lt;div class="section" id="tri"&gt;
     &lt;h2&gt;3rd&lt;/h2&gt;
   
   &lt;/div&gt;
   &lt;div class="section" id="recycle"&gt;
     &lt;h2&gt;4th&lt;/h2&gt;
     &lt;/div&gt;
              
              &lt;div class="section" id="vente"&gt;
     &lt;h2&gt;last&lt;/h2&gt;
   
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>my code :</p>