I've seen this animation in Webflow, where basically a ball (div) moves between different points of the screen on scroll and even is aware of "obstacles."

https://css-19dd88.webflow.io/

This also seems to work responsively. When looking at the code there is no canvas or svg / path.

How can this be replicated using CSS and vanilla javascript? How can the trajectory and obstacles be defined in such way that it even works responsively?