Plugin not working

[DuffDX]

I'm having no luck implementing skrollr-stylesheets at all.

I have this CSS link in my HTML <link rel="stylesheet" href="css/skrollr.css" data-skrollr-stylesheet>

This is the CSS from skrollr.css

#bottle {
    -skrollr-animation-name: animation1;
}
@-skrollr-keyframes animation1{
    0 {
        background-color:rgba(0,0,255,0.3);
    }
    2000 {
        background-color:rgba(255,0,0,0.3);
    }
}

This is the HTML block I'm trying to affect <div id="bottle"><img src="css/images/bottle.png" /></div>

Nothing from skrollr gets applied to my element.

In trying to diagnose the problem, I've found that this statement (in parseAnimationDeclarations) is evaluating as null even when the value of rxAnimation.exec(input) is not null.

while((animation = rxAnimation.exec(input)) !== null) {
    ...
}

The current output from rxAnimation.exec(input) is an array, which is not (!==) null.

["@-skrollr-keyframes animation1", "animation1", index: 207, input:#bottle {position: fixed; z-index: 12; width: 100%; text-align: center; height: 100vh; background-color: rgba(255, 255, 0, 0.1); -skroller-animation-name: animation1;}@-skrollr-keyframes animation1{0 { left: 100%; background-color:rgba(0,0,255,0.3);}2000 {left: 0%;background-color:rgba(255,0,0,0.3);}}"]

So nothing within the while statement gets applied and none of my animation or selector objects are being built.

Any ideas where I've gone wrong?

UPDATE

Found that part of the problem was spaces in the CSS. Still working on it.

UPDATE 2

The problem seems to stem from the processing of the CSS, with spacing playing a large factor in successful parsing.

For instance, I was finally able to get this to work, but only after I created a second CSS element and animation. My CSS looked like this:

#bottle {
    -skrollr-animation-name: animation1;
}
@-skrollr-keyframes animation1{
    0 {
        background-color:rgba(0,0,255,0.3);
    }
    2000 {
        background-color:rgba(255,0,0,0.3);
    }
}
#foo {
    -skrollr-animation-name: animation2;
}
@-skrollr-animation animation2 {
   0 {
        background-color: black;
    }
    20 {
        background-color: red;
    }
}

skrollr did NOT work on #bottle, but did work on #foo. PROGRESS!!

I swapped #foo and #bottle to get skrollr working again on an element I actually needed. Once that was working for #bottle, I cleaned up my CSS, removing #foo and the animation keyframes for it.

ERROR!!

I was unable to remove the unnecessary CSS and keep skrollr-stylesheets working. My solution for now is to have a placeholder element and animation at the top of the file. Why does this work? I haven't figured it out, but it does.

#do-not-delete-this-line{-skrollr-animation-name: junk;} @-skrollr-keyframes junk {}

#bottle{
  -skrollr-animation-name: animation1;
}

@-skrollr-keyframes animation1 {
  0 {
  background-color: rgba(0, 0, 255, 0.3); }
  20 {
  background-color: rgba(255, 0, 0, 0.3); }
}

[Prinzhorn]

If you want to debug this further maybe it will be easier to play with the test suite and create a failing test. https://github.com/Prinzhorn/skrollr-stylesheets/blob/f6a339e128a69e7d25e7caa4bdf38b5235cf29c6/test/style.css

[estevancarlos]

Can't get this to work either but i understand this project may no longer be under development.