0

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.

Andrew C
  • 3
  • 2

1 Answers1

2

Make sure you initialize skrollr when all images, which affect layout, are loaded. For example inside of the examples element, there are images which affect the height of the parent and thus the position of your venn diagrams relative to the viewport (as soon as the images are loaded, your diagram moves down). Your diagram is actually animating, but before it enters the viewport, because of this offset.

Prinzhorn
  • 22,120
  • 7
  • 61
  • 65
  • Thanks for the fast response! That makes sense. For future JavaScript newbies, $(document).ready() executes when the DOM is loaded, and $(window).load() executes when EVERYTHING is loaded, so just wrap your skrollr.init() in `$(window).load(function() { var s = skrollr.init(); });` [source](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin) – Andrew C Feb 10 '14 at 22:08