I'm trying to add a scrolling animation, where an object's Y transform is based on how scrolled over the object I am. When it scrolls into view it'll start sliding up, and be fully slid up when it's ~50% in view.

From what I've found, IntersectionObserver almost does what I want. However, I'd like it to fire whenever the intersection % changes, either due to scroll or document reflow changing the bounding rectangle of the element.

I can add a callback to scroll change, but I can't find anything allowing me to watch for bounding rectangle change due to reflow. MutationObserver doesn't take that into account.

Is there a way I can do this?