CODEWITHSUNDEEP
javascripttriggersintersection-observer
Louise
Louise

Reputation: 5

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

(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?

Upvotes: 0

Views: 1305

Answers (2)

mbehzad
mbehzad

Reputation: 3878

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)

Upvotes: 2

user17517503
user17517503

Reputation: 163

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

Upvotes: 0

Related Questions