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
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}
</p>

View file

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

View file

@ -14,7 +14,8 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
<Image
src={qp}
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
data-inview