Bayda77/digital-resume-FE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added animate presence usage in the work experience page for the toggle switch

Browse Source
This commit is contained in:
Bayda77
2026-01-13 00:33:12 -06:00
parent 4019d4cb10
commit 4291c2fd9e
1 changed files with 49 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/WorkExperience.tsx
View File

@@ -1,4 +1,5 @@
import { useState } from 'react'; import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
const WORK_EXPERIENCES = [ const WORK_EXPERIENCES = [
{ {
@@ -138,8 +139,16 @@ export default function WorkExperience() {
}}>All Jobs</span> }}>All Jobs</span>
</div> </div>
<AnimatePresence mode="popLayout">
{filteredExperiences.map((experience, index) => ( {filteredExperiences.map((experience, index) => (
<div key={`${experience.company}-${experience.period}`} style={{ <motion.div
layout
key={`${experience.company}-${experience.period}`}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
transition={{ duration: 0.3 }}
style={{
marginBottom: "30px", marginBottom: "30px",
padding: "20px", padding: "20px",
backgroundColor: "rgba(152, 116, 116, 0.1)", backgroundColor: "rgba(152, 116, 116, 0.1)",
@@ -148,11 +157,8 @@ export default function WorkExperience() {
display: "flex", display: "flex",
gap: "20px", gap: "20px",
alignItems: "flex-start", alignItems: "flex-start",
animation: "slideInFromLeft 0.6s ease-out forwards", }}
// Reset key when filtering to re-trigger animation cleanly, or just use index if that's preferred strictly for list stability (though re-animating feels nicer for a filter change usually, let's keep it simple with unique key first) >
animationDelay: `${index * 0.2}s`, // Faster stagger for filtered list
opacity: 0
}}>
{experience.image && ( {experience.image && (
<img <img
src={experience.image} src={experience.image}
@@ -178,8 +184,9 @@ export default function WorkExperience() {
))} ))}
</ul> </ul>
</div> </div>
</div> </motion.div>
))} ))}
</AnimatePresence>
</div> </div>
</div> </div>
</div> </div>