Javascript - Skrollr library - how to use the data attributes ? What am I doing wrong?

Question

I am using the skrollr library and I couldnt really find many useful explanations on its official page(github) so Ive been reading on stackoverflow etc. I still have trouble understanding how to use skrollr and its data-attributes.

After researching, I tried to implement 4 things, of which only one works..If anyone could tell me what I am doing wrong and the skrollr data attributes, it would be amazing.

1. What is the difference of data-100 and data-100p ?
2. when to use data-start attribute? It does not seem to change anything, whether or not im using it?
3. I dont quite understand the css requirements to make the animations work-data-attributes without the css is not enough but I confused what to do here.
4. In my code I tried to do 4 animations: a. change opacity from 'visible' to not visible (opacity of 0) / works (as the only animation) b. change opacity but from not visible to visible / does not work c. make two div's slide away (left to left and right to right) /does not work d. zoom into the picture while scrolling /dows not work

I made a jsfiddle, so you could see it better and also included my code in here. Thank you!!!

https://jsfiddle.net/codingcodingcoding/44yb72ps/2/

html:

<div class="one" data-0='opacity: 1' data-100='opacity: 0'>
    </div>
    <div class="two" data-100="opacity: 0" data-200="opacity: 1"></div>
    <div class="three">
        <div class="three-left" data-200="left: 0%;">
        </div>
        <div class="three-right" data-200="left: 50%;">
        </div>
    </div>
    <div class="four" data-0='transform: scale(1.0,1.0);' data-150p='transform: scale(1.3, 1.3);opacity: 1;' data-200p='opacity: 0; transform: scale(6, 6);'></div>
    <div class='section' data-bottom-top="background-position: 50% 100%" data-top-bottom="background-position: 50% 0%">
    </div>

css:

    .one {
        background-image: url('http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050');
        width: 100%;
        height: 100%;
    }
    .two {
        background-color: red;
        width: 100%;
        height: 100%;
    }
    .three {
        width: 100%;
        height: 100%;
        display: block;
        .three-left {
            width: 50%;
            height: 100%;
            left: 0%;
            background-color: green;
        }
        .three-right {
            width: 50%;
            height: 100%;
            left: 50%;
            background-color: yellow;
        }
    }
    -four {
        width: 100%;
        height: 100%;
        background-color: yellow;
    }

js:

    ( function( $ ) {
        // Init Skrollr
        var s = skrollr.init({
            render: function(data) {
            }
        });
    } )( jQuery );