表示領域に入ったら画像をスライドイン表示させる方法

<!--inview-->
<script>
	document.addEventListener("DOMContentLoaded", () => {
		const targets = document.querySelectorAll(".inview");
		const observer = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					entry.target.classList.add("active");
					observer.unobserve(entry.target);
				}
			});
		});
		targets.forEach(target => observer.observe(target));
	});
</script>

/* inview */

.inview img{
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.5s ease;
}

.inview.active img{
	clip-path: inset(0 0 0 0);
}