Streaming live at 10am (PST)

Animating Element When Scrolled Into View Within Modal

I have an element, inside a modal, that animates (scale from 0 to 1) when its scrolled into view, which works just fine. What I’d like to do is have that same animation play once the modal is closed and re-open again.

I’ve tried adding a reverse (scale from 1 to 0) once the close button is clicked, which also works, but once user opens the modal, the element is invisible.

Any tips on this? thought it should be straight-forward but not so,

Any ideas on this at all. If not possible with WF, maybe some JS?

You need to post your read only link.

Sure:
https://preview.webflow.com/preview/serving-retirees-d5eaec273f69d4992a1f53?utm_medium=preview_link&utm_source=designer&utm_content=serving-retirees-d5eaec273f69d4992a1f53&preview=95fdd9453abbf78de20fdbf2214ad629&mode=preview

Yeah, got the same results when trying the most obvious approach of firing the reset ix on modal close.

What I suggest is adding reset on “scroll out of view” for the elements (also it will work better if you don’t set the offset, just leave it at 0). This way if someone scrolls up on modal, the elements will disappear and once scrolled again they will reappear. If someone closes modal without scrolling up the elements will be visible on open which is logical as modal will be scrolled already. Then if they scroll modal again the elements will disappear and appear again on scroll back, which also would be visually logical.

As a matter of fact using scrolling into view interaction inside scrollable modals was impossible to implement not too long ago - I faced this problem on my own portfolio where I have modal window for “about”, and couldn’t implement scroll into view ix. Now it is feasible but I am too lazy to update, haha.