I'm working on implementing Skrollr into customer's website. I'm using relative position like this:
<div id="deer" data-anchor-target="#benchmark" data-200-bottom="left: -100px" data-bottom="left: 80px"></div>
However, the animation seems to not working when I first loaded the page. But after I resize screen (e.g. open 'Responsive Design View' in Firefox, or turn on/off Firebug), the animation seems to work fine.
This problem occurs in Firefox (Mac) and Google Chrome (Windows). In Chrome (Mac) this problem is disappear.
Please help take a look at this working demo. I have been trying to fix this problem for whole day :( http://goo.gl/scFwV
Disable JavaScript and visit your page. You'll notice the #benchmark element is much closer to the top. The reason is simple: Your image slider takes the space, but skrollr calculates the offset before this happens. Your animation is in fact running, but before the animals enter your viewport.
Conclusion: Call skrollr.init when the slider is done loading. Or you can call refresh (https://github.com/Prinzhorn/skrollr#refreshelements).