Skip to content
Submitted over 4 years ago

Room Homepage with CSS Transitions and JS (GSAP) Animations

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Room homepage challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, everybody! 👋

I've given a lot of feedback on this particular challenge, and now it's my turn to give it a go! I hope I did okay! 😅

I ended up coding a lot more Sass and JS than I initially expected, but I learned a lot. I decided to put the slider images in my HTML so that I could use the <picture> element for responsive images but stored the text in my JS (feedback on my JS would be appreciated).

I added some cool transitions to the mobile menu and navigation and created an intro animation (using GSAP) after stumbling upon this YouTube video and remembering Connor Z did the exact same thing (and blew me away when I saw it) when he completed this challenge! 😆

More importantly, I tried to ensure that the design scales up and down nicely (which gave me quite a headache because of this behavior of flexbox), but I think I managed to do it okay in the end.

Of course, feedback is welcome and appreciated! 😊

Happy coding, everyone! 😁

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Dytoma•550
    @Dytoma

    Your solution is amazing😍😍.

    Can you please tell me How you managed to get this wonderful animations😅.

  • Matt Studdert•13,611
    @mattstuddert

    Hey APG, you've done a really great job on this challenge. Your solution is a good representation of the design, scales up/down very well, and the added extras with the animations and the transitions give it a beautifully polished feel 😍

    I've only got two small suggestions on things to tweak:

    • You don't actually need the second source inside your picture elements, as the img at the bottom will act as the fallback if the other conditions aren't met or the browser doesn't support the picture element.
    • You've done a great job of thinking about accessibility and how people might use the keyboard to navigate the page. One thing you could add is the aria-live="polite" attribute to the .hero__text-wrapper element to make sure the content changes are announced to screen reader users. Here's the MDN page for aria-live for more information.

    Keep up the amazing work! 👍

  • Anna Leigh•5,135
    @brasspetals

    Apologies, as I have nothing constructive to say. Yet another fantastic job that I am bookmarking for reference! 👏

  • Favourite Jome•1,110
    @jomefavourite

    Wow, the animations are just amazing 🤩

  • positivevibes•205
    @posivibez

    Awesome work. Love the intro animation, so cool! Referencing your work was very helpful for me. Thank you.

  • Guy Ezra•615
    @ezraguy

    Hey @ApplePieGiraffe, your solution is absolutely beautiful, WOW. very professional! great job!

  • Kevin Canlas•225
    @kvncnls

    Hey APG! Your site is awesome! Can I ask how you made the navbar close when you have it open on mobile/tablet size then expand to desktop size?

    So let's say your window was 500px width, you open the navbar menu, then you expand the window passed the navbar menu limit (where the hamburger menu should disappear). How did you get the navbar to close automatically? I don't think I saw an event listener on window resize.

  • Arturo Simon•1,805
    @artimys

    Hey there APG, I didn't realize you submitted a solution. Got to say it's pretty baller. High praise 🙌. Not sure if this is intentional on your part but when shrinking the browser width to 999px. The mobile nav appears prematurely and hides.

    Great job 👍

  • Connor Z•5,115
    @zuolizhu

    Coming from your comment on my solution 😏 I really love your design on the scales up and down, it just looks amazing 👏! One little detail you can try next time, when using tab navigating on those buttons, you can add

    :focus {
    outline: rgb(104, 190, 205) dotted 3px;
}

    (This is how frontendmentor.io did on their buttons and input box 🤓)

    I think your skills of HTML CSS and JavaScript are solid enough, you could try some frameworks (I highly recommend Svelte since it's not that different from no-framework) to help you manage your code, e.g. for this project, you can split the index.html into header, carousel, about etc components, and makes it a lot much easier to maintain when you keep adding details latter on 😎.

    As always, keep coding 💪 and happy coding 🙌!!

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