Space tourism website w/ react router, framer motion

Solution retrospective
My first experience with react router and framer motion. Actually did this solution a while ago, so react router is set up using older syntax.
Stuff worth mentioning:
-
Tried different approaches of using framer motion, and ended up just writing its code into
styled().attrs
const Header = styled(motion.h1).attrs({ variants: { hidden: { opacity: 0, y: 100 }, show: { opacity: 1, y: 0, transition: { duration: 0.8 } }, exit: { opacity: 0, y: 100, transition: { duration: 0.5 } }, }, })` padding: 0; ... `
Don't know what are the best practices of pairing styled components with framer motion, but I like this approach. Animations belong to styles, so why don't just write them within a styled component?
-
Using framer motion with react router was a bit tricky. I couldn't find a way for nested routes to animate properly on exit. So the links in the navigation bar trigger exit animations, but the nested links don't. And the white underline doesn't animate between links. Maybe should've added another layer of
AnimatePresence
? Or add akey
attribute to nested routes the same way it's on theRoutes
so react explicilty rerenders them? I probably tried both, can't remember. Anyway it doesn't matter since react-router now has different syntax.
Stuff from todo that I didn't do:
- preloading of images
- make drawer scrollable on small screen heights
- extract isMdUp and isLgUp to a custom hook (useThemeBreakpoint?)
- extract duplicate styled components
- make sub routes swipeable on mobile?
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on turtlecrab's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord