Push Notifications and Newsletter Signup Form with Transitions

index.pug

.wrapper
  button.notify 
    div.notify-icon 
      |<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24">
      |  <path d="M12,24a3.07,3.07,0,0,0,3-3H9A3.12,3.12,0,0,0,12,24Z" transform="translate(-1.76)" fill="#ffffff"/>
      |  <path d="M15.14,3.95a2.1,2.1,0,0,1-1-1.82h0a2.1,2.1,0,1,0-4.19,0h0a2.1,2.1,0,0,1-1,1.82C4.2,6.66,6.88,15.66,2,17.25V19H22V17.25C17.12,15.66,19.8,6.66,15.14,3.95ZM12,3a1,1,0,1,1,1-1A1,1,0,0,1,12,3Z" transform="translate(-1.76)" fill="#ffffff"/>
      |  <line class="notify-off-line" x1="21.24" y1="2.65" x2="0.92" y2="22.97" stroke="" stroke-miterlimit="10"/>
      |  <line class="notify-off-line" x1="20.24" y1="1.98" x2="0.53" y2="21.69" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="1.5"/>
      | </svg>
    span.notify-label Get Notification
    span.notify-off-label Turn Off Notifications
  .form
    input.email-input(placeholder="Your email here.")
    input.name-input(placeholder="Your name here.")
  button.newsletter 
    div.newsletter-icon 
      | <svg version="1.1" id="iconmonstr" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
      | <path id="paper-plane-1" style="fill:#FFFFFF;" d="M24,0l-6,22l-8.129-7.239l7.802-8.234L7.215,13.754L0,12L24,0z M9,16.669V24l3.258-4.431L9,16.669z"/>
      | </svg>
    span.start-label Get Newsletter
    span.form-label Add Me

push-notifications-and-newsletter-signup-form-with-transitions.markdown

Push Notifications and Newsletter Signup Form with Transitions

A Pen by 14islands on CodePen.

License.

script.babel

let isFormActive = false
let isNotificationsActive = false
const duration = .2
const transitionY = 10
const easing = Sine.easeOut

const notifyButton = document.getElementsByClassName('notify')[0]
const newsletterButton = document.getElementsByClassName('newsletter')[0]

const emailInput = document.getElementsByClassName('email-input')[0]
const nameInput = document.getElementsByClassName('name-input')[0]

const form = document.getElementsByClassName('form')[0]

//TweenLite.set(form, {opacity: 0, y: transitionY})
TweenLite.set(notifyButton, {opacity: 1, y: 0})
TweenLite.set(emailInput, {opacity: 0, y: transitionY})
TweenLite.set(nameInput, {opacity: 0, y: transitionY})

newsletterButton.addEventListener("click", () => {
  if (isFormActive) {
    var tl = new TimelineLite();
    tl.call(() => {
      document.body.classList.remove('is-form')
    })
    tl.to(emailInput, duration, {opacity: 0, y: transitionY, ease: easing})
    tl.to(nameInput, duration, {opacity: 0, y: transitionY, ease: easing}, '-0.1')
    tl.to(notifyButton, duration, {opacity: 1, y: 0, ease: easing})
    tl.play()
  } else {
    var tl = new TimelineLite();
    tl.call(() => {
      document.body.classList.add('is-form')
    })
    tl.to(notifyButton, 0.15, {opacity: 0, y: -transitionY, ease: easing})
    tl.to(emailInput, 0.15, {opacity: 1, y: 0, ease: easing}, '+0.1')
    tl.call(() => {
      emailInput.focus();
    })
    tl.to(nameInput, duration, {opacity: 1, y: 0, ease: easing})
    tl.play()
  }
   isFormActive = !isFormActive
})

notifyButton.addEventListener("click", () => {
  if (isNotificationsActive) {
    document.body.classList.remove('is-notify')
  } else {
    document.body.classList.add('is-notify')
  }
   isNotificationsActive = !isNotificationsActive
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

style.scss

$brand-color: #01a084;
$input-padding: 15px 26px 15px;
$border-radius: 3px;
$transition: all 200ms ease-out;
$translateY: 20px;
 
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}
  
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
  font-weight: 100;
}
  
.wrapper {
  //background-color: yellow;
  width: 700px;
  height: 60px;
  position: relative;
}

.form {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
    
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 76%;

  .is-form & {
    z-index: 2;
  }
}

input {
    display: block;
    width: 47%;
    height: 60px;
    padding: $input-padding;
    font-size: 18px;
    outline: 0;
    border: 1px solid silver;
    border-radius: $border-radius;
    &:focus {
      border: 1px solid $brand-color
    }
  }
  
button {
  display: block;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 3px;
	white-space: nowrap;
	outline: 0;
  display: block;
	padding: 15px 26px 15px;
	background: $brand-color;
  border:  2px solid $brand-color;
  color: white;
  font-size: 22px;
  letter-spacing: .05rem;
  width: 48%;
  
  position: absolute;
  z-index: 2;
  transition: $transition;
  
  span {
    padding-left: 20px;
  }
  
  .form-label,
  .notify-off-label {
    display: none;
  }
  
  &.notify {
    top: 0;
    left: 0;
    
    .is-notify & {
       background: transparent;
       border: solid 2px silver;
      
      .notify-label {
        display: none;
      }
      
      .notify-off-label {
        display: inline-block;
        font-size: 18px;
        color: silver;
      }
    }
  }
  
  &.newsletter {
    top: 0;
    right: 0;
    
    .is-form & {
      width: 20%;
      .start-label {
        display: none;
      }
      .form-label {
        display: inline-block;
        font-size: 18px;
      }
    }
  }
  
  /*
  * Icons
  */
  
  .notify-icon,
  .newsletter-icon {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 100;
    margin-top: -12px;
  }
  
  .notify-icon {
    width: 22px;
    height: 24px;
    transition: $transition;
    transform: translateX(65px) rotate(10deg);
    transform-origin: center center;
    
    .notify-off-line {
      opacity: 0;  
    }
    
    .is-notify & {
      transform: translateX(45px) rotate(0deg);
      path {
        fill: #949494;
      }
      .notify-off-line {
        opacity: 1;
        &:first-child {
          stroke: #949494;
        }
        &:last-child {
          stroke: #f7f7f7;
        }
      }
    }
  }
  
  .newsletter-icon {
    width: 24px;
    height: 24px;
    transition: $transition;
    transform: translateX(55px);
    .is-form & {
      transform: translateX(15px);
     }
   }
}