Insure Landing Page

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi again, Stiratto 👋

  If you want to make easier show/hide animation, use jQuery though. But if you want to stick to the vanilla JavaScript, that's ok too.

  The animation uptoDown will only play when nav ul is rendered into the page (i.e. transition from display: none; to display: block;), not vice versa. When it comes to show/hide animation, what comes to my mind is transform and transition property. Let's say, when the element is hidden, we give it transform: scaleY(0);, and when it's shown, we change it to transform: scaleY(1);. We then just give it transition property when it shows/hides. We will not use display property as it's not an animatable property.

  Take a look at the code below:

  navBar.addEventListener("click", () => {
      // document.getElementById("navBarUl").style.display = 'block'
      document.getElementById("navBarUl").style.transform = 'scaleY(1)';
      ...
  })
  
  navBarClose.addEventListener("click", () => {
      // document.getElementById("navBarUl").style.display = 'none'
      document.getElementById("navBarUl").style.transform = 'scaleY(0)';
      ...
  })
  

  Now to make sure the transform process will animate, let's add default states and transition property to nav ul.

  nav ul {
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.3s;
      ...
  }
  

  Don't forget to comment display: none; declaration and animation property as we don't need them anymore.

  Another method is using clip property (It's deprecated though, and its alternative is clip-path) by setting the default, hidden state as clip: rect(0,100vw,0,0);, and show it using clip: rect(0,100vw,100vh,0);. It's up to developer which kind of animation do they prefer.

  Other than those two methods, I think there are several other methods to achieve the same effect that we want.

  A little bit of tips:

  • In hero image, to prevent width x height proportion changes at certain screen widths, add object-fit: cover;
  • In icon images, remove max-height: 100%; as that would only change the proportions in certain screen widths. It's enough to only set the width, let the height automatically follows.

  Hope this helps. Happy coding!

  Marked as helpful

  0