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

design: implement split-screen sliding splash animation transition

Browse Source
This commit is contained in:
Abiram070207
2026-06-25 05:47:24 +05:30
parent 14fb43aa4e
commit f4d47e5cd4
1 changed files with 51 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -623,59 +623,58 @@ export const LoginPage: React.FC = () => {
{/* Splash Screen Overlay */}
<AnimatePresence>
{splashState !== 'done' && (
<motion.div
key="splash-overlay"
initial={{ opacity: 1, backgroundColor: '#004a99' }}
animate={{
opacity: 1,
backgroundColor: splashState === 'fade-to-white' ? '#ffffff' : '#004a99'
}}
exit={{ opacity: 0 }}
transition={{
backgroundColor: { duration: 1.5, ease: "easeInOut" },
opacity: { duration: 1.5, ease: "easeInOut" }
}}
className="fixed inset-0 flex items-center justify-center z-[200] overflow-hidden"
>
{/* Background Pattern - fade it out when transitioning to white */}
<div className="fixed inset-0 z-[200] flex overflow-hidden pointer-events-none">
{/* Left part of splash: remains static blue on desktop to match underlying panel */}
<motion.div
animate={{ opacity: splashState === 'fade-to-white' ? 0 : 0.1 }}
transition={{ duration: 1.0 }}
className="absolute inset-0 pointer-events-none"
>
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_white_1px,_transparent_1px)] bg-[size:30px_30px]"></div>
</motion.div>
initial={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.8 }}
className="hidden lg:block lg:w-[55%] h-full bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D]"
/>
<AnimatePresence mode="wait">
{splashState === 'logo' && (
<motion.div
key="logo"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 1.1 }}
transition={{ duration: 0.6, ease: "easeInOut" }}
className="flex flex-col items-center gap-4"
>
<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>
)}
{/* Right part of splash (and full screen on mobile): slides right to reveal white page */}
<motion.div
initial={{ x: 0 }}
animate={{
x: splashState === 'fade-to-white' ? "100%" : 0
}}
transition={{ duration: 1.5, ease: [0.85, 0, 0.15, 1] }}
className="w-full lg:w-[45%] h-full bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D]"
/>
{splashState === 'text' && (
<motion.div
key="text"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
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
</h1>
</motion.div>
)}
</AnimatePresence>
</motion.div>
{/* 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' && (
<motion.div
key="logo"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 1.1 }}
transition={{ duration: 0.6, ease: "easeInOut" }}
className="flex flex-col items-center gap-4"
>
<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 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
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
</h1>
</motion.div>
)}
</AnimatePresence>
</div>
</div>
)}
</AnimatePresence>