svg animation on anchor

Question

I'm trying to make a circular timeline with steps, I am using a fullpage.js plugin that make every sections at 100% of the windows with body in overflow so actually have only 4 steps on scroll so the steps have to be:

section1 -->stroke  0%
section2 -->stroke 25%
section3 -->stroke  50%
section4 -->stroke  75%

In the current code I use hover for show what the effect :

	$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
				menu: '#menu',
				scrollingSpeed: 1000,
			});
			
		});

 body {
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	font-family: 'source_sans_proextralight';
}

/********** timeline ************/
#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,0.4);
}
#bluecircle{
	stroke-dasharray:1510;
	stroke-dashoffset:1510;
	-webkit-transition:all 1s ease;
	transition:all 1s ease;
}


#bluecircle:hover{
	stroke-dashoffset:0;
}
#smallblueleft, #smallbluebottom, #smallblueright{
	opacity:0;
		-webkit-transition:all 1s ease;
	transition:all 1s ease;
}

#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
	opacity:1;
}
 /********** section ************/
 

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.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;
}







   
   
 
			

	
  
  
	
		
		
	
	
	  fullPage.js
		Create Beautiful Fullscreen Scrolling Websites
	
	
			Example
			HTML markup example to define 4 sections.
	
	
			Working On Tablets
			Designed to fit to different screen

Kaiido · Accepted Answer

You can use the fullpage.js callback onleave(index, nextIndex, direction)

onLeave: function(index, nextIndex, direction){
      $('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)) );                  
    }

However, I didn't find a way to get the anchors.length value, this would be better than hardcoded 4.

$(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)));                  
        		}
			});
		});

body {
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	font-family: 'source_sans_proextralight';
}

/********** timeline ************/
#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,0.4);
}
#bluecircle{
	stroke-dasharray:1510;
	stroke-dashoffset:1510;
	-webkit-transition:all 1s ease;
	transition:all 1s ease;
}



#smallblueleft, #smallbluebottom, #smallblueright{
	opacity:0;
		-webkit-transition:all 1s ease;
	transition:all 1s ease;
}

#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
	opacity:1;
}
 /********** section ************/
 

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.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;
}







   
   
 
			

	
  
  
	
		
		
	
	
	  fullPage.js
		Create Beautiful Fullscreen Scrolling Websites
	
	
			Example
			HTML markup example to define 4 sections.
	
	
			Working On Tablets
			Designed to fit to different screen

svg animation on anchor

Answers (1)

Related Questions