I'm working on a very animated website that extensively uses the pin function of superscrollorama to pause scrolling while still animating certain elements based on scroll position.
The issue is one of stability and optimization. The client, of course, wants the site the be super stable and glitch free, even when grabbing the scroll bar with the mouse and jerking it up and down. Fortunately, this is the only way to get the problems to rear their ugly head, but ugly they are.
When jerking the page up and down with the scroll bar, certain elements are "lost" or "misplaced". I suspect that their positioning is not being reset appropriately. When pinned elements are unpinned, the screen goes white until the next section is pinned. You can see this especially when jerking the page up and down, stopping at the top of the page. Try scrolling down from there. Even some animations are only partially rendered in the scene after the initial office scene. I've tried resetting each affected img and divs position to absolute on unpin to no avail. I've also forced an initial fixed position on each affect img and div and still had issues.
Could it be that the is just too much going on and the browser/computer cannot render it all quick enough, dropping the unexecuted JavaScript and leaving the animation only partially completed?
I am new to the world of web development, especially front end stuff. Any help is really appreciated.
EDIT:
I ended up scrapping all of the Superscrollorama code and used Skrollr instead. None of the glitchy stuff happens now + using Skrollr made it easier to make the site responsive. Even works to a certain degree on mobile/tablet.
URL: TalentVisor