How to maintain scroll position on window resize while using scrollmagic

Question

I have a fixed container of 100vh x 100vw that contains 6 absolutely positioned divs that are 100vh x 100vw.

I use a dummy element that is positioned relative w/ 6 divs that are 100vh to trigger each scene.

When I resize the window, the scene's animation moves forward and backward in time. Is there a way to prevent that from happening?

Answer 1

The issue is that when you resize the window, the position of the scroll bar remains fixed at an absolute number of pixels. However, because your content is based on view height, the height of the document changes dynamically as you resize the window. Thus, the window scroll position as a percentage of the document body height is also changing, and this is what ScrollMagic bases progress on.

To illustrate with simplified math:

A) Given a window height of 1000px, your document height will be 6vh * 1000px = 6000px tall. If your window scroll position is 1200px, you'll be 20% of the way through the overall ScrollMagic timeline.

B) If you resize the browser to 800px tall, that changes the document height to 6hv * 800px = 4800px tall. However the window scroll position will remain at 1200px, which is now 25% of the way through the ScrollMagic timeline.

The simplest solution is probably to keep your document a fixed height.