Скроллр проблемы с якорными целями

Я пытаюсь перевернуть divs друг над другом, когда вы прокручиваете страницу, используя Skrollr. Я получил желаемый эффект для работы с двумя div, но когда я пытаюсь заставить его работать с третьим, кажется, что работает только первый и последний div. Я думаю, это связано с тем, что я не совсем понимаю, как работает атрибут привязки данных-привязки в Skrollr. Вот HTML, который я пытаюсь использовать:

<div id="skrollr-body">
        <div id="q1" data-0="top:0%;">
            Text
        </div>
        <div id="q2" data-anchor-target="#q1" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
            Text2
        </div>
        <div id="q3" data-anchor-target="#q2" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
            Text3
        </div>
    </div>

И CSS:

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#skrollr-body {
    width:100%;
    height:100%;
    position:fixed;
}
#skrollr-body > div {
    overflow:hidden;
    position:absolute;
    height: 100%;
    width: 100%;
}
#q1 {
    background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
    background-size: cover;
}
#q2 {
    background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
    background-size: cover;
}
#q3 {
    background: url(http://iwritealot.com/wp-content/uploads/2010/02/golden-clouds-wallpaper.jpg) center center no-repeat;
    background-size: cover;
}

Скриншот здесь

Что мне не хватает, что не позволяет всем 3 divs вести себя так, как ожидалось, а не только первым и последним?

Благодарю.