Can I trigger an animation when an element reaches half way in the viewport?

Question

(JavaScript) I can see that it is possible to trigger an animation using an IntersectionObserver when an element enters and leaves the viewport - but is there a way to trigger an animation when an element reaches half way in the view port?

Answer 1

you can use something like

new IntersectionObserver(yourAnimation, {rootMargin: "0px 0px -50% 0px"})

your element will be intersecting when it enters the top half of the viewport. basically adding a minus margin of half its height to the bottom edge of your root (here viewport)

Answer 2

You can use

if(elment.offsetLeft==window.offsetWidth) {startAnimation()}
// or element.offsetTop and window.offsetHeight
//you should write the startAnimation function, it not a built-in function