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

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

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