Skrollr - Questions regarding data attributes when pausing scrolling

Question

There is code in the pausing.html example for skrollr on github that is not explained at all in the docs. For example:

<div data-0="transform:translate(0,100%);" data-100p="transform:translate(0,0%)" data-_box-100p="" data-_box-200p="transform:translate(0,-100%)">

what is the data-100p attribute? it isn't mentioned in the docs

Also data-_box-100p="" is a , I don't understand what it controls... the pause? in the lone html comment it implies that the duration of of the pause is set by the constant "box". so that makes sense for the data-_box, but I don't know the rest of the attribute (100p="" in one case and

I am trying to stack several section that will each pause for an animation and I am having problems with the logic involved in controlling skrollr's pause capabilities

Answer 1

Percentage offset : p

The offset number which appending "p" means the percentage offsets. For example: data-100p = scrolled down 100% of the viewport.

Constants

Offset can be repsented by a constant in the skrollr world. And please note the name of the constant need to append a underscore prefix.

skrollr.init({
    constants:{
        box: 50
    }
});

So....

data-_box equals to data-50
data-_box-100p eqauls to data-150p
data-_box-200p equals to data-250p

Hope this is helpful.