I have some HTML code
<div class="mission" id="mission_block">
<div class="mission__img">
<img src="img/phone90.png" alt="">
</div>
<div class="mission__text">
<h1>Our mission and vision</h1>
<p>While technology is our sweet spot, we’ve developed our vision alongside
our customers to ensure your everyday problems are solved through simplistic tools. And as your
business grows, we’ll grow right alongside with you. </p>
</div>
</div>
I need animate this blocks when window will be on the middle of block mission. How can I create trigger for this?
I already have such JS code:
((window, document) => {
window.onload = () => {
const missionBlock = document.getElementById('mission_block');
const sizes = missionBlock.getBoundingClientRect();
const {height, top} = sizes
const scrollTriggerHeigth = top + height / 2
}
})(window, document, undefined)
You could do this easily with Intersection Observer API.
E.g.
const missionBlock = document.getElementById("mission_block");
let observer = new IntersectionObserver(
(entries) => {
// Take the first entry
const entry = entries[0];
if (entry.isIntersecting) {
// do here whatever you need to do
console.log("instersecting", entry);
doWhatever();
}
},
{ threshold: 0.5 }
);
observer.observe(missionBlock);