Room Homepage with CSS Transitions and JS (GSAP) Animations

Community feedback

• 

  Dytoma•550

  @DytomaPosted almost 2 years ago

  Your solution is amazing😍😍.

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

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  @Dytoma

  Thank you very much! 😊

  I learned how to create the animations for my solution from this YouTube video by one of my favorite coding YouTubers, Dev Ed.

  The animation library I used is free and it's called GSAP. You can check it out here.

  Hope that helps you! 👍

  1

  

  Dytoma•550

  @DytomaPosted almost 2 years ago

  @ApplePieGiraffe Yessir thank you very much👌😁

  1
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 4 years ago

  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! 👍

  4

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @mattstuddert

  Thanks for the feedback, Matt! 😊

  Those tips are great! 👍

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

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

  2

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @brasspetals

  Awww...  thanks, Anna! 😆

  0
• 

  Favourite Jome•1,110

  @jomefavouritePosted almost 4 years ago

  Wow, the animations are just amazing 🤩

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @jomefavourite

  Thanks, jomefavourite! 👍

  1
• 

  positivevibes•205

  @posivibezPosted almost 4 years ago

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

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @posivibez

  Thanks, posivibez!

  0
• 

  Guy Ezra•615

  @ezraguyPosted almost 4 years ago

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

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @ezraguy

  Thanks a lot! 😄

  1
• 

  Kevin Canlas•225

  @kvncnlsPosted almost 4 years ago

  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.

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @kvncnls

  Hey, kvncnls!

  If I remember correctly, I put all of the styles of the mobile navigation inside a media query so that they only apply to the mobile navigation when the screen width is below a certain point (like, 800px or 1000px or something). If the screen width is ever above that point, the styles of the desktop navigation get applied so that the mobile navigation "automatically" switches between desktop and mobile layouts. IDK if it's perfect—but it seemed to work okay for this challenge! 😉

  Happy coding! 😁

  1
• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  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 👍

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @artimys

  Thanks, artimys! 😊

  Yeah, I decided to hide the mobile navigation before completely switching to a mobile-friendly layout so that the navigation links too look too squeezed or anything. 😉 The mobile navigation flashes due to the transition I put on it, but I didn't worry about it too much since I don't imagine most users will be resizing the page (they will just either be in the mobile layout or the desktop layout) and if they did, it would simply be a small quirk in the design. But that was just my train of thought!

  0
• 

  Connor Z•5,115

  @zuolizhuPosted about 4 years ago

  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 🙌!!

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @zuolizhu

  Thanks so much! 😊 I'll take your advice and learn something new!

  Funny you should recommend learning Svelte because I was looking around at JS frameworks last night and out of all of them couldn't stop reading the Svelte tutorial! 😄

  Happy coding to you, too!

  1