skrollr keyframes not executing properly

having some fun with skrollr. as I understand it, once you pass whatever pixel you have set as a data attribute, whatever css code you have in there should run. what am I missing here? I'm simply trying to show/hide some paragraphs as they reach their start and end pixels but they appear before the mark and don't disappear on their own afterwards. for example, why does p2 show up before the 50th frame? why doesn't it disappear?

http://codepen.io/anon/pen/rLVGjw

var s = skrollr.init({
  forceHeight: true,
  render: function(data){
    document.querySelector(".whereami").innerHTML = data.curTop;
  }
});

    body {
      background: #000;
    }
    p {
      position: absolute;
      top: 200px;
      left: 200px;
    }

  <script src="
               https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<div class="whereami" style="position: fixed; top: 0; left: 0; color: #fff">0</div>

  <main>
    <p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
    <p data-0="opacity: 0" data-50="opacity: 1" data-100="opacity: 0">p2</p>    
    <p data-0="opacity: 0" data-150="opacity: 1" data-200="opacity: 0">p3</p>    
    <p data-0="opacity: 0" data-200="opacity: 1" data-250="opacity: 0">p4</p>    
    <p data-0="opacity: 0" data-250="opacity: 1" data-300="opacity: 0">p5</p>

    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />

Solution

p2 is shown before 50px scroll because it has 0 opacity on "data-0" and then it has 1 opacity on "data-50" that means the opacity will go from 0 to 1 in that 50px scroll. This means that it will overlap with p1 which has its opacity changing from 1 to 0 in the same 50 px.

You need to have something like this:

<p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
<p data-50="opacity: 0" data-100="opacity: 1" data-150="opacity: 0">p2</p>

The idea is not to overlap the paragraphs in the same scroll value. You finish the transition between 0 to 50px at 50px and then you start the transition of the new paragraph from 50px to how much you think is needed and so on for the rest of the elements.

I tried the code below in your codepen for the first 3 paragraph and the animations worked as you want:

<p data-0="opacity: 1" data-50="opacity: 0">p1</p>    
<p data-50="opacity: 0" data-100="opacity: 1" data-150="opacity: 0">p2</p>    
<p data-150="opacity: 0" data-200="opacity: 1" data-250="opacity: 0">p3</p>