Skrollr Relative Mode Not Working Properly in Chrome or Safari

Question

I'm using the relative mode to start and end my animations using the Skrollr plugin ( https://github.com/Prinzhorn/skrollr ). Everything works great in IE but the animations are occurring early in Safari and Chrome and late in Firefox. I'm using data-bottom as my start point and data-center as my end point. So the animation should start right when the entire element just pops through the bottom of the viewport and should end at the center of the viewport.

Here is the website where you can see the animation occuring under div id="div56709" under the "Why Moms Ministry" section.

http://group.com/womens-ministry/where-moms-connect

Any ideas on why the above issues are occurring would be greatly appreciated.

Answer 1

So the animation should start right when the entire element just pops through the bottom of the viewport

Well, not exactly. data-bottom is short for data-bottom-bottom and means when the bottom of the element is at the bottom of the viewport. What you describe is data-bottom-top .

I tried it in Firefox and Chrome and it looks as expected.

One thing you could try is calling refresh() on window.onload. This will recalculate the relative mode. Maybe when you call init() there are some images not loaded which move the content down (even though you explicitly set width and height on the img elements.)

Edit: In fact, I just verified that this is the problem. You can verify by hitting ctrl+f5 to force a reload. The animation will be off. If you now resize your browser (triggering refresh internally) it works.