Scoot multipage website | React, Framer Motion, Tailwind CSS

Community feedback

• 

  Miroslav•180

  @miroslavdurinPosted over 2 years ago

  Hello and congratulations on finishing this project. This was also my first intermediate project and it was a bigger challenge than I expected... I've found 2 issues, which had bothered me as well:

  • on the main paige Learn more links don't seem to be working. Problem is that it can't find the route, since it is deployed on Netlify and not on a local server. You should go to your public folder and make a _redirects file. Then you should put this code inside: /* /index.html 200. You can read more about that here: LINK
  • second issue is that I don't see animations working. I think the problem is somewhere in the utils folder, because if I simply put this code:

  <motion.div
        initial={{opacity: 0}}
        animate={{opacity: 1}}
  >
  

  animations start to work. And btw, I've noticed that you have <AnimatePresence> component wrapped around your Router, this component is necessary only if you want to have exit animations on rout changes, and you haven't used exit animations...I would love to help you more with animations, but I don't really understand the code inside of utils folder, but if you need a help with exit animations let me know, or you can check on my GitHub too...

  Marked as helpful

  3

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @miroslavdurin Thanks a lot, I'll try to fix everything. I forgot to toggle animations back (I disabled them before for the screenshot) 😅 They are working now. I thought using <AnimatePresence> was necessary to make page transitions work, but I was wrong, so I removed it. It looks like there is still a lot of things I can learn about Framer Motion 😁 The other one is more complicated, so I'll try to fix it tomorow.

  animationsVariantsFactory is basically a set of functions to create variants based on given delay. I just wanted to have my animations in one place to keep my code DRY. The other file is just propTypes.shape() for my generated variants from those functions. (also, to have everything in one place and to avoid duplications)

  Thanks once again, have a nice day ✌️

  1

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @miroslavdurin Links are fixed as well :) It was pretty simple (because of you haha), but I haven't even checked whether links work as intended before.

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Karol, congratulations, another great solution as always. I liked a lots that you've reached an extreme level of details, its almost pixel perfect (only the logo is a little bit bigger). Super cool 👏👏

  Its really great the arrow animation you did animating two different elements at once, I just loved it.

  You're the second person in FEM I saw with pixel perfect solutions, do you use any tool to help you building the html/css exactly as the Figma design or you just have a good eye for minimal details? There's something you do to overlay the reference and live seeing if they match?

  I want to reach pixel perfect for my challenges too, its so cool see the slider matching 100% the reference.

  I don't have any considerations about your solution is just perfect, I had only to give the compliments for the pixel perfect output. 👏👏👏

  Lucas

  Marked as helpful

  1

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @correlucas :) Thank you 😁!

  I made it almost pixel-perfect by checking all components after I coded each one. You can make it happen using browser extensions. I personally use Pixel Perfect Pro for Firefox, simply because I prefer Firefox over Chrome, but I used to use PerfectPixel for Chrome before. In premium challenges you need to export your designs to pngs/jpgs to import it into extensions, since there isn't any design files other than .fig. If you want to compare the designs quickly based on the screenshots, you can also use a Diff Checker website. Sometimes it's also good to make solution private at first, check the design in the FEM and then make some changes if needed.

  I'll try to fix this logo to match the design today.

  Hope this helps! Have a nice day Lucas 👋

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @miroslavdurin hello Miroslav, thank you a lots dude I was wondering if these extensions exists. I'll try that for sure! 👏👏

  1

  

  Miroslav•180

  @miroslavdurinPosted over 2 years ago

  @correlucas Oh, I deleted my comment since Karol had already replied, you can find lots of things just by searching through Google store. That's how I found them at least :)

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @GrzywN thank you Karol, I wasn't aware of that, I'll try these tools for sure and try to apply to my next challenge. ✌️

  Thank you for this helpful answer 👏👏👏👏

  2