Not the Bees!

index.haml

#wrap
 .field
 %form.signup
  %input.email{:type => "email", :placeholder => "email", :maxlength => "25"}/
  .btnwrap
   -6.times do
    .spark
   .btn
    .inner
     -12.times do
      .hive
   %input{:type => "submit", :value => "Subscribe"}/

not-the-bees.markdown

Not the Bees!

Another playful form built w/ Splitting.js

A Pen by Adam Kuhn on CodePen.

License.

script.js

Splitting();
$('.signup').submit(function(event){
 event.preventDefault();
 
 var emailText = $('.email').val();
 $(".field").append("<p data-splitting='chars'>" + emailText + "</p>");
  Splitting();
  $("#wrap").addClass("plunge");
  setTimeout(function(){	
    $('.email').val('');
    $( ".field p" ).remove();
    $("#wrap").removeClass("plunge");
}, 6000);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/splitting@1.0.5/dist/splitting.min.js"></script>

style.scss

body{
  background:
radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
background-size: 40px 60px;
}



body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  overflow:hidden;
  --orange: #B71;
  --pink: #fb1;
  --gray: #ccc;
  #wrap{
    position:relative;
    display:inline-block;
    height:70px;
    font-family:"Lato";
    width:600px;
    margin-left:-40px;
    &:before{
      content:'';
      position:fixed;
      width:100vw;
      height:100vh;
      background:url(https://media.giphy.com/media/YZaNlktdPMiTm/giphy.gif);
      background-size:cover;
      background-position:center;
      top:0;
      left:0;
      transition:1s ease-in-out;
      transition-delay:1s;
      opacity:0;
      pointer-events:none;
    }
    form.signup{
      transition:0.5s ease-in-out;
      transition-delay:2s;
      opacity:1;
    }
    &.plunge{
      pointer-events:none;
      &:before{
        transition-delay:3.5s;
        opacity:0.75;
      }
      form.signup{
        transition-delay:5s;
        opacity:0;
        .btnwrap{
          .btn{
            transition-delay:1.75s;
            transform:translateX(-90px);
            .inner{
              height:100%;
              overflow:visible;
              width:calc(100% + 60px);
              animation:dropOut 2.5s ease-in-out 1 forwards;
              transition-delay:5s, 3.5s;
              background-size:100% 100%;
              animation-delay:2.75s;
              opacity:0;
              @keyframes dropOut{
                0%{
                  transform:rotate(0deg);
                  width:calc(100% + 60px);
                }
                10%{
                  transform-origin:0% 50%; 
                  transform:rotate(-90deg) translateX(-60px) translateY(-40px);
                  width:100%;
                }
                12%{
                 transform-origin:0% 50%; transform:rotate(-88deg) translateX(-60px) translateY(-40px);
                  width:100%;
                }
                17%{
                 transform-origin:0% 50%;  transform:rotate(-92deg) translateX(-60px) translateY(-40px);
                  width:100%;
                }
                20%{
                 transform-origin:0% 50%;  transform:rotate(-88deg) translateX(-60px) translateY(-40px);
                  width:100%;
                }
                23%{
                 transform-origin:0% 50%;  transform:rotate(-91deg) translateX(-60px) translateY(-40px);
                  width:100%;
                }
                25%{
                 transform-origin:0% 50%;  transform:rotate(-90deg) translateX(-60px) translateY(-40px);
                  width:100%;
                }
                75%{
                 transform-origin:0% 50%;  transform:rotate(-90deg) translateX(-60px) translateY(-40px);
                  width:100%;
                }
                100%{
                 transform-origin:0% 50%;  transform:rotate(-90deg) translateX(-60px) translateX(-100vh);
                  width:100%;
                }
              }
              &:after{
                transition-delay:4s;
                transform:scaleX(1);
              }
              &:before{
                transition-delay:1.75s;
                opacity:0;
              }
              .hive{
                @for $i from 1 through 12{
                  &:nth-of-type(#{$i}){
                    transition-delay:#{($i / 20) + 3}s;
                    border-radius:20px;
                    box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 2px 0px 0 0 var(--orange);
                    &:before{
                      transition-delay:inherit;
                      opacity:1;
                      border-radius:20px;
                    box-shadow:inset 0 1px 0 0 var(--orange), inset 0 -1px 0 0 var(--orange), inset 1px 0px 0 0 var(--orange);
                    }
                  }
                  &:last-of-type{
                    box-shadow:inset 0 0px 0 0 var(--orange), inset 0 0px 0 0 var(--orange), inset 0px 0px 0 1px var(--orange);
                    max-height:100%;
                    width:10%;
                  }
                }
                @for $i from 1 through 8{
                  &:nth-of-type(#{$i}){
                    height:150%;
                    
                  }
                }
                @for $i from 9 through 12{
                  &:nth-of-type(#{$i}){
                    height:#{130% - ($i * 1%)};
                    
                  }
                }
              }
            }
          }
        }
      }
      input[type="email"]{
        color:transparent;
        transition-delay:2s;
        transform:translateX(-100px) scaleX(0);
      }
      .btnwrap{
        .spark{
          animation:spark 0.3s ease-in-out 1 forwards;
          @keyframes spark{
            0%{
              transform:rotate(45deg) scale(0);
            }
            50%{
              transform:rotate(135deg) scale(1);
            }
            100%{
              transform:rotate(45deg) scale(0);
            }
          }
          @for $i from 1 through 6{
            &:nth-of-type(#{$i}){
              animation-delay:#{($i / 10) + 2}s;
            }
          }
        }
      }
      .field{
        z-index:999;
        clip-path: polygon(-100% -300%, 95% -300%, 95% 400%, -100% 400%);
        p{
          .word{
            .char{
              z-index:-1;
              offset-path:path("M 0 0 Q 150 50 150 100 Q 250 150 350 0 Q 350 50 500 0 ");
              &:before, &:after{
                opacity:1;
              }
              @for $i from 1 through 10{
                &:nth-of-type(#{$i}n){
                  animation:flyaway#{$i} 1.55s ease-in 1 forwards;
                  will-change:margin;
                  animation-delay:#{$i/15}s;
                  @keyframes flyaway#{$i}{
                    0%{
                      margin-top:10px;
                    }
                    25%{
                      margin-left:#{$i * -2.45}px;
                      margin-top:10px;
                      offset-distance:0%;
                    }
                    95%{
                     margin-left:#{$i * -2.45}px;
                     margin-top:0px;
                     offset-distance:100%;
                      opacity:1;
                    }
                    100%{
                     margin-left:#{$i * -2.45}px;
                     offset-distance:110%;
                     opacity:0;
                    }
                  }
                }
              }
              &:nth-of-type(2n){
                animation-duration:1.25s;
                offset-path:path("M 0 0 Q 150 50 150 -100 Q 250 -150 350 0 Q 350 50 500 0 ");
              }
              &:nth-of-type(3n){
                animation-duration:1.1s;
                offset-path:path("M 0 0 Q 150 250 150 100 Q 250 -150 350 0 Q 350 50 500 0 ");
                
              }
              &:nth-of-type(4n){
                animation-duration:1.05s;
                offset-path:path("M 0 0 Q 150 50 150 0 Q 250 -50 250 0 Q 250 50 500 0 ");
              }
              &:nth-of-type(5n){
                animation-duration:1.35s;
                offset-path:path("M 0 0 Q 150 50 350 0 Q 250 50 250 0 Q 150 50 500 0 ");
              }

              &:after{
                transition:0.2s ease-in-out;
                transform:scale(0.75);
                z-index:-1;
              }
            }
          }
        }
      }
    }
    .field{
      position:absolute;
      height:70px;
      width:calc(100% - 180px);
      top:0px;
      left:50px;
      z-index:9;
      pointer-events:none;
      font-size:20px;
      font-family:"Lato";
      line-height:1.5;
      p{
        font-family:"Lato";
        position:relative;
        display:inline-block;
        .word{
          .char{
            display:inline-block;
            z-index:2;
            position:relative;
            font-family:"Lato";
            color:#000;
            font-weight:900;
            &:before, &:after{
              content:'';
              position:absolute;
              width:15px;
              height:7.5px;
              background:#fff;
              box-shadow:0 0 0 1px #000;
              border-radius:50px 50px 0 0;
              left:-12.5px;
              top:5px;
              transform-origin:bottom right;
              animation:flap 0.05s ease-in-out infinite alternate;
              transition:opacity 0.25s ease-in-out;
              opacity:0;
              @keyframes flap{
                from{
                  transform:rotate(-20deg);
                }
                to{
                  transform:rotate(30deg);
                }
              }

            }
            &:after{
              animation-delay:0.02s;
            }
            &:nth-of-type(2n){
              &:after, &:before{
                animation-delay:-0.35s;
              }
            }
          }
        }
      }
      
    }
    form{
      position:relative;
      height:70px;
      width:100%;
      display:inline-block;
      z-index:9;
      input[type="email"]{
        max-height:70px;
        height:70px;
        width:calc(100% - 50px);
        padding:0 0 0 50px;
        border-radius:80px;
        box-sizing:border-box;
        border:none;
        outline:none;
        font-size:16px;
        font-family:"Lato";
        font-size:20px;
        font-weight:900;
        background:#fff; 
        box-shadow:inset 0 0 0 2px var(--orange);
        transition:transform 0.3s ease-in-out;
        transition-delay:0.5s;
        transform-origin:right;
        &::placeholder{
          color:#ccc;
          font-weight:100;
        }
      }
      .btnwrap{
        display:inline-block;
        width:auto;
        height:auto;
        position:absolute;
        right:0;
        top:0;
        .spark{
          position:absolute;
          width:15px;
          height:3px;
          background:linear-gradient(to right, var(--orange), var(--orange), var(--orange));
          top:-25px;
          border-radius:100px;
          right:10px;
          transform:rotate(45deg) scale(0);
          &:nth-of-type(4){
            right:-50px;
            top:0;
          }
          &:nth-of-type(3){
            right:-50px;
            top:30px;
          }
          &:nth-of-type(2){
            right:-10px;
            top:105px;
          }
          &:nth-of-type(5){
            right:20px;
            top:120px;
          }
          &:nth-of-type(6){
            right:-20px;
            top:-15px;
          }
          &:before{
            content:'';
            position:absolute;
            width:3px;
            height:15px;
            background:var(--orange);
            top:calc(50% - 7.5px);
            left:calc(50% - 1.5px);
            border-radius:inherit;
          }
        }
        .btn{
          position:absolute;
          color:#fff;
          width:100%;
          height:100%;
          display:flex;
          justify-content:center;
          align-items:center;
          font-family:"Lato";
          letter-spacing:1px;
          z-index:999;
          font-size:20px;
          pointer-events:none;
          transition:0.5s ease-in-out;
          .inner{
            content:'';
            position:absolute;
            width:calc(100% + 60px);
            height:100%;
            background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%);
            background-size:100% 600%;
            background-position:center;
            z-index:-1;
            left:-20px;
            border-radius:0 80px 80px 0;
            box-shadow:inset 0 0 0 2px var(--orange);
            overflow:hidden;
            transition:opacity 0.3s ease-in-out, background-size 0.2s ease-in-out;
            transform-origin:0% 150%;
            opacity:1;
            &:after{
              content:'';
              position:absolute;
              width:25px;
              height:15px;
              background:var(--orange);
              box-shadow:inset -3px 0px 0 2px rgba(0,0,0,0.25);
              z-index:5;
              left:0;
              top:calc(50% - 7.5px);
              border-radius:0 50px 50px 0;
              transition:0.2s ease-in-out;
              transform-origin:left;
              transform:scaleX(0);
            }
            &:before{
              content:'Subscribe';
              position:absolute;
              left:50%;
              top:50%;
              opacity:1;
              transition:0.2s ease-in-out;
              transform:translateX(-50%) translateY(-50%);
            }
            .hive{
              position:absolute;
              width:15%;
              left:0;
              height:100%;
              opacity:1;
              top:50%;
              transform:translateY(-50%);
              transition:0.2s ease-in-out;
              @for $i from 1 through 12{
                &:nth-of-type(#{$i}){
                  left:#{($i - 1) * 6.25%};
                  box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 0px 0 0 0 var(--orange);
                  border-radius:0px;
                  z-index:-1;
                  &:before{
                    content:'';
                    position:absolute;
                    width:100%;
                    height:100%;
                    left:0;
                    top:0;
                    background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%);
                    opacity:0;
                    transition:0.3s;
                  }
                }
                &:first-of-type{
                  box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 2px 0 0 0 var(--orange);
                }
                &:last-of-type{
                  &:before{
                    content:'';
                    position:absolute;
                    width:100%;
                    height:calc(100% - 4px);
                    top:2px;
                    background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%);
                  }
                }
              }
            }
          }
        }
      }
      input[type="submit"]{
        height:70px;
        border-radius:80px;
        padding:0 30px;
        border:none;
        opacity:0;
        
      }
    }
    
  }
  
}