Excuse me that I don't know much JavaScript since I'm a designer.
I have two animations in relative mode which, when you initially view them are displayed at their end keyframe even though they're supposed to be at their start keyframe (at that point in the scrolling). If you resize the browser window in any way, they assume their correct behavior and jump back to the start keyframe where they're supposed to be. However, if you refresh the page again they always load at the end keyframe, which makes me think that they're getting the wrong viewport size or scrolling position.
Here is the site: http://vostrocity.dreamhosters.com/#skills
For example, the following displays only its end keyframe unless I resize the window:
<div id="venn-prototyping" class="venn"
data-100-top-top="transform[swing]:translate(0px,0px);"
data--100-top-bottom="transform[swing]:translate(-290px,600px);">
<h2>Prototyping</h2>
</div>
I have one animation in absolute mode which works fine without resizing the browser window.