Relative keyframe issue form data-center-top to data-center-bottom

[BoylesWhite]

Hello,

The aim it to have a progress bar to begin animation when the top of the element hits the center of the viewport then to complete when the bottom of the element hits the center of the viewport.

See my fiddle here: https://jsfiddle.net/tzu7hqaa/2/

  <div style="display:block;position:relative;height:1000px;width:5px;background-color:#cccccc;margin:300px 0;">
     <div style="width:100%;position:absolute;background-color:black;" data-center-top="height:0%;" data-center-bottom="height:100%;">
     </div>
   </div>

I feel as though this is not behaving correctly by just "jumping" to the end. Am I missing something?

Relative keyframing docs here: https://github.com/Prinzhorn/skrollr#absolute-vs-relative-mode and visual here: http://www.goocode.net/uploads/posts/2014-11/1415020124_2.gif

Thanks in advance.