Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

Space tourism website w/ react router, framer motion

motion, react, react-router, styled-components
turtlecrab•550
@turtlecrab
A solution to the Space tourism multi-page website challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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 a key attribute to nested routes the same way it's on the Routes 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?
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License