Prinzhorn / skrollr

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
http://prinzhorn.github.io/skrollr/
MIT License
18.53k stars 3.51k forks source link

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

Open BoylesWhite opened 7 years ago

BoylesWhite commented 7 years ago

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.