Merge pull request 'andy/reduce-flicker' (#25) from andy/reduce-flicker into main

Reviewed-on: Webmaster/dev-ieeeucsd-org#25
Reviewed-by: Shing Hung <shing.hung@ieeeucsd.org>
This commit is contained in:
Shing Hung 2025-02-07 04:45:49 +00:00
commit 196d61190d
3 changed files with 5 additions and 2 deletions

View file

@ -41,7 +41,7 @@ const { name, position, picture, email } = Astro.props;
> >
<p <p
data-inview data-inview
class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]" class="opacity-0 in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
> >
{name} {name}
</p> </p>

View file

@ -3,9 +3,11 @@
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
entry.target.classList.add("in-view"); entry.target.classList.add("in-view");
entry.target.classList.remove("opacity-0");
console.log("Added 'in-view' class to:", entry.target); console.log("Added 'in-view' class to:", entry.target);
} else { } else {
entry.target.classList.remove("in-view"); entry.target.classList.remove("in-view");
entry.target.classList.add("opacity-0");
console.log("Removed 'in-view' class from:", entry.target); console.log("Removed 'in-view' class from:", entry.target);
} }
}); });

View file

@ -14,7 +14,8 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
<Image <Image
src={qp} src={qp}
alt="qp showcase photo" alt="qp showcase photo"
class="md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full" class="md:opacity-0 w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full relative in-view:animate-fade-down"
data-inview
/> />
<Link <Link
data-inview data-inview