Skip to content

Instantly share code, notes, and snippets.

@conofor

conofor/index.html

Created April 4, 2022 14:34
Show Gist options
  • Save conofor/e40a37319f6d844dfc67b4541b5a6596 to your computer and use it in GitHub Desktop.
Save conofor/e40a37319f6d844dfc67b4541b5a6596 to your computer and use it in GitHub Desktop.
Download ZIP
Paper plane button
Raw
index.html
<button class="button">
<span class="default">Send</span>
<span class="success">Sent</span>
<div class="left"></div>
<div class="right"></div>
</button>
<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
Raw
script.js
document.querySelectorAll('.button').forEach(button => {
let getVar = variable => getComputedStyle(button).getPropertyValue(variable);
button.addEventListener('click', e => {
if(!button.classList.contains('active')) {
button.classList.add('active');
gsap.to(button, {
keyframes: [{
'--left-wing-first-x': 50,
'--left-wing-first-y': 100,
'--right-wing-second-x': 50,
'--right-wing-second-y': 100,
duration: .2,
onComplete() {
gsap.set(button, {
'--left-wing-first-y': 0,
'--left-wing-second-x': 40,
'--left-wing-second-y': 100,
'--left-wing-third-x': 0,
'--left-wing-third-y': 100,
'--left-body-third-x': 40,
'--right-wing-first-x': 50,
'--right-wing-first-y': 0,
'--right-wing-second-x': 60,
'--right-wing-second-y': 100,
'--right-wing-third-x': 100,
'--right-wing-third-y': 100,
'--right-body-third-x': 60
})
}
}, {
'--left-wing-third-x': 20,
'--left-wing-third-y': 90,
'--left-wing-second-y': 90,
'--left-body-third-y': 90,
'--right-wing-third-x': 80,
'--right-wing-third-y': 90,
'--right-body-third-y': 90,
'--right-wing-second-y': 90,
duration: .2
}, {
'--rotate': 50,
'--left-wing-third-y': 95,
'--left-wing-third-x': 27,
'--right-body-third-x': 45,
'--right-wing-second-x': 45,
'--right-wing-third-x': 60,
'--right-wing-third-y': 83,
duration: .25
}, {
'--rotate': 55,
'--plane-x': -8,
'--plane-y': 24,
duration: .2
}, {
'--rotate': 40,
'--plane-x': 45,
'--plane-y': -180,
'--plane-opacity': 0,
duration: .3,
onComplete() {
setTimeout(() => {
button.removeAttribute('style');
gsap.fromTo(button, {
opacity: 0,
y: -8
}, {
opacity: 1,
y: 0,
clearProps: true,
duration: .3,
onComplete() {
button.classList.remove('active');
}
})
}, 2000)
}
}]
})
gsap.to(button, {
keyframes: [{
'--text-opacity': 0,
'--border-radius': 0,
'--left-wing-background': getVar('--primary-darkest'),
'--right-wing-background': getVar('--primary-darkest'),
duration: .1
}, {
'--left-wing-background': getVar('--primary'),
'--right-wing-background': getVar('--primary'),
duration: .1
}, {
'--left-body-background': getVar('--primary-dark'),
'--right-body-background': getVar('--primary-darkest'),
duration: .4
}, {
'--success-opacity': 1,
'--success-scale': 1,
duration: .25,
delay: .25
}]
})
}
})
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
Raw
style.scss
.button {
--primary: #275EFE;
--primary-dark: #2055EE;
--primary-darkest: #133FC0;
--text: #FFFFFF;
--text-opacity: 1;
--success: #2B3044;
--success-scale: .2;
--success-opacity: 0;
--border-radius: 7;
--overflow: hidden;
--rotate: 0;
--plane-x: 0;
--plane-y: 0;
--plane-opacity: 1;
--left-wing-background: var(--primary);
--left-wing-first-x: 0;
--left-wing-first-y: 0;
--left-wing-second-x: 50;
--left-wing-second-y: 0;
--left-wing-third-x: 0;
--left-wing-third-y: 100;
--left-body-background: var(--primary);
--left-body-first-x: 50;
--left-body-first-y: 0;
--left-body-second-x: 50;
--left-body-second-y: 100;
--left-body-third-x: 0;
--left-body-third-y: 100;
--right-wing-background: var(--primary);
--right-wing-first-x: 50;
--right-wing-first-y: 0;
--right-wing-second-x: 100;
--right-wing-second-y: 0;
--right-wing-third-x: 100;
--right-wing-third-y: 100;
--right-body-background: var(--primary);
--right-body-first-x: 50;
--right-body-first-y: 0;
--right-body-second-x: 50;
--right-body-second-y: 100;
--right-body-third-x: 100;
--right-body-third-y: 100;
display: block;
cursor: pointer;
position: relative;
border: 0;
padding: 8px 0;
min-width: 100px;
text-align: center;
margin: 0;
line-height: 24px;
font-family: inherit;
font-weight: 500;
font-size: 14px;
background: none;
outline: none;
color: var(--text);
transform: rotate(calc(var(--rotate) * 1deg)) translateZ(0);
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
.left,
.right {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: var(--plane-opacity);
transform: translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0);
&:before,
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: calc(var(--border-radius) * 1px);
transform: translate(var(--x, .4%), var(--y, 0)) translateZ(0);
z-index: var(--z-index, 2);
background: var(--background, var(--left-wing-background));
clip-path: polygon(calc(var(--first-x, var(--left-wing-first-x)) * 1%) calc(var(--first-y, var(--left-wing-first-y)) * 1%), calc(var(--second-x, var(--left-wing-second-x)) * 1%) calc(var(--second-y, var(--left-wing-second-y)) * 1%), calc(var(--third-x, var(--left-wing-third-x)) * 1%) calc(var(--third-y, var(--left-wing-third-y)) * 1%));
}
}
.left:after {
--x: 0;
--z-index: 1;
--background: var(--left-body-background);
--first-x: var(--left-body-first-x);
--first-y: var(--left-body-first-y);
--second-x: var(--left-body-second-x);
--second-y: var(--left-body-second-y);
--third-x: var(--left-body-third-x);
--third-y: var(--left-body-third-y);
}
.right:before {
--x: -.4%;
--z-index: 2;
--background: var(--right-wing-background);
--first-x: var(--right-wing-first-x);
--first-y: var(--right-wing-first-y);
--second-x: var(--right-wing-second-x);
--second-y: var(--right-wing-second-y);
--third-x: var(--right-wing-third-x);
--third-y: var(--right-wing-third-y);
}
.right:after {
--x: 0;
--z-index: 1;
--background: var(--right-body-background);
--first-x: var(--right-body-first-x);
--first-y: var(--right-body-first-y);
--second-x: var(--right-body-second-x);
--second-y: var(--right-body-second-y);
--third-x: var(--right-body-third-x);
--third-y: var(--right-body-third-y);
}
span {
display: block;
position: relative;
z-index: 4;
opacity: var(--text-opacity);
&.success {
z-index: 0;
position: absolute;
left: 0;
right: 0;
top: 8px;
transform: rotate(calc(var(--rotate) * -1deg)) scale(var(--success-scale)) translateZ(0);
opacity: var(--success-opacity);
color: var(--success);
}
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// Center & dribbble
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter', Arial;
background: #E1E6F9;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
height: 28px;
}
}
.twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
svg {
width: 32px;
height: 32px;
fill: #1da1f2;
}
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment