javascript - FabricJS weird line animation with pageSnap -

i using fabricjs create js line animation , use pagesnapjs create snapping sections. however, line animation behavior quite random. if slowly scroll color pages, you'll see red line animation. page 1 2 fine, page 2 3 fails. calculation incorrect? how correct it?

here code (jsfiddle @ end of question):

var canvas; var current_page = 1; var is_animating = false; var line_options = {     stroke: 'red',     strokewidth: 3 }; $(document).ready(function() {     canvas = new fabric.canvas('line_effect');     canvas.setheight($('.indicator').height());     canvas.setwidth(50);     canvas.renderall();     var section_h = $('.section').height();      var startpts = [         {x: 48, y: 0},         {x: 48, y: $('.section').height()}     ];     var endpts = [         {x: 48, y: $('.section').height() * 2},         {x: 48, y: $('.section').height()}     ];      var line = new fabric.polyline(startpts, line_options);     canvas.add(line);      function animateline(i, prop, endpts) {         fabric.util.animate({             startvalue: line.points[i][prop],             endvalue: endpts[i][prop],             duration: 1000,             easing: fabric.util.ease.easeinoutcubic,             onchange: function(value) {                 line.points[i][prop] = value;                 if(i === startpts.length - 1 && prop == 'y') {                     canvas.renderall();                 }             },             oncomplete: function() {                 line.setcoords();                 if(i === startpts.length - 1 && prop == 'y') {                     = !even;                     animateline(i, prop, endpts);                 }             }         });     }     function animate(startpage, endpage) {         if(is_animating) {             return;         } else if(startpage == endpage) {             return;         } else if(math.abs(startpage - endpage) > 1) {             // jump section immediately.             console.log('jump page ' + endpage);             canvas.remove(line);             if(endpage == 1) {                 line = new fabric.line([48, section_h * 0, 48, section_h * 1], line_options);             } else if(endpage == 2) {                 line = new fabric.line([48, section_h * 1, 48, section_h * 2], line_options);             } else if(endpage == 3) {                 line = new fabric.line([48, section_h * 2, 48, section_h * 3], line_options);             } else if(endpage == 4) {                 line = new fabric.line([48, section_h * 3, 48, section_h * 4], line_options);             }              canvas.add(line);         } else {             is_animating = true;             if(startpage == 1 && endpage == 2) {                 console.log('page 1 > 2');                 startpts = [                     {x: 48, y: section_h * 0},                     {x: 48, y: section_h * 1}                 ];                 endpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 1}                 ];             } else if(startpage == 2 && endpage == 3) {                 console.log('page 2 > 3');                 startpts = [                     {x: 48, y: section_h * 1},                     {x: 48, y: section_h * 2}                 ];                 endpts = [                     {x: 48, y: section_h * 3},                     {x: 48, y: section_h * 2}                 ];             } else if(startpage == 3 && endpage == 4) {                 console.log('page 3 > 4');                 startpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 3}                 ];                 endpts = [                     {x: 48, y: section_h * 4},                     {x: 48, y: section_h * 3}                 ];             } else if(startpage == 4 && endpage == 3) {                 console.log('page 4 > 3');                 startpts = [                     {x: 48, y: section_h * 4},                     {x: 48, y: section_h * 3}                 ];                 endpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 3}                 ];             } else if(startpage == 3 && endpage == 2) {                 console.log('page 3 > 2');                 startpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 3}                 ];                 endpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 1}                 ];             } else if(startpage == 2 && endpage == 1) {                 console.log('page 2 > 1');                 startpts = [                     {x: 48, y: section_h * 2},                     {x: 48, y: section_h * 1}                 ];                 endpts = [                     {x: 48, y: section_h * 0},                     {x: 48, y: section_h * 1}                 ];             } else {                 console.log('others: ' + startpage + ' > ' + endpage);             }             canvas.remove(line);             line = new fabric.polyline(startpts, line_options);             canvas.add(line);             for(var = 0, len = startpts.length; < len; i++) {                 animateline(i, 'y', ? endpts : startpts);              }             is_animating = false;         }     }      var = true;     $('.contents').panelsnap({         $menu: false, // menu dom object         onsnapstart: function($target) {             if($target.data('panel') == 'page2') {                 animate(current_page, 2);             } else if($target.data('panel') == 'page3') {                 animate(current_page, 3);             } else if($target.data('panel') == 'page4') {                 animate(current_page, 4);             } else if($target.data('panel') == 'page1') {                 animate(current_page, 1);             }          },         onsnapfinish: function($target) {             current_page = parseint($target.data('panel').replace('page', ''));             console.log('current page: ' + current_page);         }      }); }); 

here jsfiddle

i've seen animation in other frameworks fail relative sizing, succeed absolute sizing values. started playing fiddle using additional js start setting values height , width px values instead of % values , looking promising.

this adapted jsfiddle containers.

$('html, body').css({'height':$('.contents').height()+'px','width':$('.contents').width()+'px'});   $('.indicator .section').css({'height':$('.contents').height/4+'px'}); 

you might try heading in direction if need responsive design. suspect you're doing there several such tweaks things pinned down.