Newsletter sign-up form

Community feedback

• 

  norrland90•310

  @norrland90

  Posted about 2 years ago

  The reason the animation is not working is because you are using display (as you're changing from display: none to display: block). If you try with using visibility it works.

  .confirmation {
  background-color: #ffffff;
  max-width: 504px;
  width: 100%;
  border-radius: 36px;
  padding: 64px;
  /* display: none; */
  visibility: hidden;
  opacity: 0;
  transition: opacity 5s ease-in-out;
  }
  
  
  .confirmation.fade-in {
  /* display: block; */
  visibility: visible;
  opacity: 1;
  }
  

  You might also want to reset the form on pressing the dismiss button. Or else pointer events will still be 'none' and you can't press anything when you get back to the main card.

  cardArea.style.pointerEvents = 'auto';
  emailInput.value = '';
  

  01