Rework #6
@ -6,20 +6,21 @@ export function LazyImage({ src, alt, className }: { src: string; alt: string; c
|
||||
|
||||
useEffect(() => {
|
||||
if (ref.current) {
|
||||
let toggle = false;
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
if (entries.some(x => x.isIntersecting)) {
|
||||
setLoaded(true);
|
||||
toggle = !toggle;
|
||||
ref.current?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, easing: "ease-in-out" });
|
||||
ref.current?.animate([
|
||||
{ opacity: 0 },
|
||||
{ opacity: 1 }
|
||||
], {
|
||||
duration: 300,
|
||||
easing: "ease-in-out"
|
||||
});
|
||||
observer.disconnect();
|
||||
}
|
||||
else {
|
||||
if (toggle) {
|
||||
console.log("fade out");
|
||||
ref.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 500, easing: "ease-in-out" });
|
||||
}
|
||||
}
|
||||
}, {
|
||||
rootMargin: "200px",
|
||||
threshold: 0
|
||||
});
|
||||
observer.observe(ref.current);
|
||||
return () => {
|
||||
|
Loading…
Reference in New Issue
Block a user