const baloons = document.getElementsByClassName("baloon");

// Threshold Callback

let threshold = [];
for (let i = 0; i <= 1.0; i += 0.01) {
	threshold.push(i);
}

let callback = (entries) => {
	entries.forEach((entry) => {
		if (entry.isIntersecting) {
			entry.target.classList.add("roll");
			observer.unobserve(entry.target);
		}
	});
};

let observer = new IntersectionObserver(callback, {
	rootMargin: "0% 0% -100% 0%",
	threshold: threshold,
});

Array.from(baloons).forEach((baloon) => {
	observer.observe(baloon);
});