SidharthPL/Event-Management-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: combine logo and event hub text in splash screen animation

Browse Source
This commit is contained in:
Abiram070207
2026-06-25 05:59:35 +05:30
parent 8b2537df62
commit 9d3a958454
1 changed files with 25 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/pages/LoginPage.tsx
View File

@@ -49,21 +49,16 @@ export const LoginPage: React.FC = () => {
useEffect(() => {
const timer1 = setTimeout(() => {
setSplashState('text');
}, 1500);
setSplashState('fade-to-white');
}, 3200);
const timer2 = setTimeout(() => {
setSplashState('fade-to-white');
}, 3000);
const timer3 = setTimeout(() => {
setSplashState('done');
}, 4500);
}, 4700);
return () => {
clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);
};
}, []);
@@ -643,32 +638,33 @@ export const LoginPage: React.FC = () => {
>
{/* Centered content overlay for Logo/Text */}
<div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
<AnimatePresence mode="wait">
{splashState === 'logo' && (
<AnimatePresence>
{splashState !== 'fade-to-white' && (
<motion.div
key="logo"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 1.1 }}
key="splash-content"
initial={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.6, ease: "easeInOut" }}
className="flex flex-col items-center gap-4"
className="flex flex-col items-center gap-6 text-center"
>
{/* College Logo */}
<motion.div
initial={{ opacity: 0, scale: 0.8, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>
<img src={ritLogo} alt="RIT Logo" className="h-28 w-auto object-contain drop-shadow-[0_10px_20px_rgba(255,255,255,0.15)]" />
</motion.div>
)}
{splashState === 'text' && (
<motion.div
key="text"
initial={{ opacity: 0, y: 10 }}
{/* Text RIT EVENT HUB appearing below the logo */}
<motion.h1
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.6, ease: "easeInOut" }}
className="text-center"
transition={{ delay: 0.9, duration: 0.8, ease: "easeOut" }}
className="text-4xl md:text-5xl font-black text-white tracking-widest uppercase mt-2"
>
<h1 className="text-4xl md:text-5xl font-black text-white tracking-widest uppercase">
RIT EVENT HUB
</h1>
</motion.h1>
</motion.div>
)}
</AnimatePresence>