Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Last active April 26, 2020 22:35
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save CodeMyUI/a91fe9d9c4339cc616d9e89d52835b2e to your computer and use it in GitHub Desktop.
Flip Your Lid *chrome only sry*
#wrap
.field
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.5 76.5"><defs><style>.cls-1{fill:transparent;stroke:#fff;stroke-miterlimit:10; stroke-linecap:round;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M286.3,33.3H138.7c-50.1,0-70.1,0-70.1,0"/></g></g></svg>
%form.signup
%input.email{:type => "email", "maxlength" => '30', "onkeyup" => "return forceLower(this);"}/
.btnwrap
-6.times do
.spark
%b Subscribe
.blob
%input{:type => "submit", :value => "Subscribe"}/
function forceLower(strInput)
{
strInput.value=strInput.value.toLowerCase();
}
Splitting();
$('.signup').submit(function(event){
event.preventDefault();
var emailText = $('.email').val();
$(".field").append("<p data-splitting='chars'>" + emailText + "</p>");
Splitting();
$("#wrap").addClass("flip");
setTimeout(function(){
$(".char, .word").addClass("slide");
}, 1);
setTimeout(function(){
$('.email').val('');
$( ".field p" ).remove();
$("#wrap").removeClass("flip");
}, 3000);
});
<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>
body{
display:flex;
justify-content:center;
align-items:center;
background:#111;
height:100vh;
--orange: #ff7b0a;
--pink: #fe3a7d;
--gray: #ccc;
*{
font-family:'Lato';
}
#wrap{
width:100%;
max-width:800px;
min-width:800px;
position:relative;
margin-top:-175px;
&.flip{
svg{
path{
animation:flip 2s ease-in-out 1 forwards;
}
}
input[type="email"]{
opacity: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.25}s;
}
}
}
}
form{
z-index:2;
b{
&:before{
animation:openclose 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
animation-delay:1.5s;
}
@keyframes openclose{
0%{
transform:rotate(0deg);
}
25%{
transform:rotate(-100deg);
}
75%{
transform:rotate(-100deg);
}
100%{
transform:rotate(0deg);
}
}
}
}
.field{
z-index:1;
.word{
position:relative;
&.slide{
display:inline-block;
width:100%;
transform-origin:42.5% 50%;
animation:jump 2.25s ease-in-out 1 forwards;
@keyframes jump{
0%{
transform:translateX(0) rotate(0deg);
}
70%{
transform:translateX(-20px) rotate(-11.5deg);
}
75%{
transform:translateX(-20px) rotate(-11.5deg);
}
100%{
transform:translateX(0px) rotate(180deg);
}
}
}
.char{
display:inline-block;
color:transparent;
position:relative;
&:after{
content:attr(data-char);
position:absolute;
display:inline-block;
left:0;
top:0;
color:#555;
animation:tumble 2s ease-in 1 forwards;
@keyframes tumble{
0%{
transform:rotate(0deg)
}
100%{
transform:rotate(-180deg);
}
}
}
@for $i from 1 through 150{
&:nth-of-type(#{$i}){
transform:translateX(0px);
&.slide{
transition:#{0.2 + ($i / 50)}s ease-in;
transition-delay:0.05s;
transform:translateX(#{($i - 1) * -9.25px});
&:after{
animation-duration:#{0.25 + ($i / 50)}s;
animation-delay:#{$i / 50}s;
}
}
}
}
}
}
}
}
.field{
position:absolute;
top:62.5px;
left:50px;
z-index:999;
width:100%;
p{
color:#000;
font-size:20px;
span{
transition:1s ease-in-out;
}
}
}
form{
position:absolute;
width:100%;
.btnwrap{
position:absolute;
right:0;
}
.spark{
position:absolute;
width:15px;
height:3px;
background:linear-gradient(to right, var(--pink), var(--orange), var(--pink));
top:-25px;
border-radius:100px;
right:10px;
transform:rotate(45deg) scale(0);
margin-top:50px;
&: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:linear-gradient(to bottom, var(--pink), var(--orange), var(--pink));
top:calc(50% - 7.5px);
left:calc(50% - 1.5px);
border-radius:inherit;
}
}
input[type="email"]{
text-transform:lowercase;
position:absolute;
height:70px;
background:transparent;
width:calc(100% - 275px);
padding-left:50px;
border:none;
box-shadow:none;
left:0;
top:57.5px;
z-index:9;
font-size:20px;
outline:none;
color:#555;
}
input[type="submit"]{
height:70px;
position:absolute;
right:0;
top:57.5px;
padding-left:35px;
padding-right:35px;
font-size:20px;
opacity:0;
}
b{
position:absolute;
color:#fff;
font-size:20px;
background:linear-gradient(to bottom, var(--orange), var(--pink));
height:70px;
display:flex;
justify-content:center;
align-items:center;
padding-left:35px;
padding-right:35px;
border-radius:0 80px 80px 0;
right:0;
top:58px;
&:before{
content:'';
position:absolute;
width:calc(100% - 20px);
background:var(--orange);
height:5px;
top:5px;
left:0;
transform-origin:5px 100%;
border-radius:0 30px 30px 0;
z-index:-1;
}
}
}
svg{
width:100%;
height:auto;
position:absolute;
left:-150px;
z-index:0;
path{
stroke:#fff;
fill:transparent;
stroke-width:25px;
@keyframes flip{
0%{
d: path("M286.3,33.3H138.7c-50.1,0-70.1,0-70.1,0");
}
90%{
d: path("M286.3,33.3H138.7c-50.1,0-70.1,24.4-70.1,24.4");
animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
100%{
d: path("M286.3,33.3H138.7c-50.1,0-70.1,0-70.1,0");
animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment