Reset TimeLineMax props inside each loop on scroll?

[pikemilsner]

Howdy folks,

 

I've spent most of the afternoon on this, just about have it hacked together.

My JS chops are weak at best, thanks for any guidance in advance

 

I'm missing a method to reset my timeline element (.modal) positioning as to recalculate the active modal distance from the top of the viewport. Works nice for the first modal, before scrolling, but the second modal as you'll see uses the initial top: $(document).scrollTop() even though the doc has been scrolled. 

 

Goal: Make the modal 100% viewport height and width, fixed top, while animating from the clicked button.

 

 

Cheers ~ 

MP

 

See the Pen pKaymz by pikemilsner (@pikemilsner) on CodePen

 

 

 

 

See the Pen pKaymz by pikemilsner (@pikemilsner) on CodePen

[Carl]

I think the solution here is to calculate the coordinates when you click on the button because where the button is in the viewport is going to determine the precise locations the modal needs to grow from and to.

 

@OSUblake has this great demo where modals grow from the boxes you click on. You can resize the window to change the flow/position of the boxes and the "modal" always animates to and from the right places. He does this by cloning the element and calculating the coordinates on each click.

See the Pen WwgQEV?editors=0011 by osublake (@osublake) on CodePen