Skip to content

Instantly share code, notes, and snippets.

@elmergustavo

elmergustavo/index.html

Created September 29, 2021 14:29
Show Gist options
  • Save elmergustavo/ffcf1a4ae9775f7b00b0462ffd6d794d to your computer and use it in GitHub Desktop.
Save elmergustavo/ffcf1a4ae9775f7b00b0462ffd6d794d to your computer and use it in GitHub Desktop.
Download ZIP
ottonova paper plane
Raw
index.html
<div class="panel">
<img src="https://assets.codepen.io/165585/avatar.png" class="avatar" />
<h1>Erhalte dein Angebot per E-Mail</h1>
<form>
<div class="grid">
<input type="text" class="firstname" placeholder="Vorname" />
<input type="text" class="lastname" placeholder="Nachname" />
<input type="text" class="phone" placeholder="Telefonnummer" />
<input type="email" class="email" placeholder="E-Mail" />
</div>
<p>
Mit dem Abschicken meiner Daten erkläre ich meine
<a href="">Einwilligung</a> zur Kontaktaufnahme durch ottonova.
</p>
<div class="cta">
<button class="button">
<span class="default">Angebot zusenden</span>
<span class="success">
<svg viewBox="0 0 16 16">
<polyline points="3.75 9 7 12 13 5" />
</svg>
E-Mail verschickt!
</span>
<svg class="trails" viewBox="0 0 33 64">
<path
d="M26,4 C28,13.3333333 29,22.6666667 29,32 C29,41.3333333 28,50.6666667 26,60"
/>
<path
d="M6,4 C8,13.3333333 9,22.6666667 9,32 C9,41.3333333 8,50.6666667 6,60"
/>
</svg>
<div class="plane">
<div class="left"></div>
<div class="right"></div>
</div>
</button>
<button class="cancel">
Abbrechen
</button>
</div>
</form>
</div>
Raw
script.js
//gsap.globalTimeline.timeScale(.1)
document.querySelectorAll(".button").forEach((button) => {
let getVar = (variable) =>
getComputedStyle(button).getPropertyValue(variable);
button.addEventListener("click", (e) => {
e.preventDefault();
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: 0.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: 0.2,
},
{
"--rotate": "50deg",
"--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: 0.25,
},
{
"--rotate": "60deg",
"--plane-x": "-8px",
"--plane-y": "40px",
duration: 0.2,
},
{
"--rotate": "40deg",
"--plane-x": "45px",
"--plane-y": "-300px",
"--plane-opacity": 0,
duration: 0.375,
onComplete() {
setTimeout(() => {
button.removeAttribute("style");
gsap.fromTo(
button,
{
opacity: 0,
y: -8,
},
{
opacity: 1,
y: 0,
clearProps: true,
duration: 0.3,
onComplete() {
button.classList.remove("active");
},
}
);
}, 1800);
},
},
],
});
gsap.to(button, {
keyframes: [
{
"--text-opacity": 0,
"--border-radius": "0px",
"--left-wing-background": getVar("--primary-dark"),
"--right-wing-background": getVar("--primary-dark"),
duration: 0.1,
},
{
"--left-wing-background": getVar("--primary"),
"--right-wing-background": getVar("--primary"),
duration: 0.15,
},
{
"--left-body-background": getVar("--primary-dark"),
"--right-body-background": getVar("--primary-darkest"),
duration: 0.25,
delay: 0.1,
},
{
"--trails-stroke": "171px",
duration: 0.22,
delay: 0.22,
},
{
"--success-opacity": 1,
"--success-x": "0px",
duration: 0.2,
delay: 0.15,
},
{
"--success-stroke": "0px",
duration: 0.15,
},
],
});
}
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
Raw
style.scss
.button {
--primary: #07f;
--primary-dark: #046ce2;
--primary-darkest: #0053b1;
--shadow: rgba(0, 16, 75, 0.2);
--text: #fff;
--text-opacity: 1;
--success: #07f;
--success-x: -8px;
--success-stroke: 14px;
--success-opacity: 0;
--border-radius: 4px;
--overflow: hidden;
--x: 0px;
--y: 0px;
--rotate: 0deg;
--plane-x: 0px;
--plane-y: 0px;
--plane-opacity: 1;
--trails: rgba(0, 16, 75, 0.2);
--trails-stroke: 57px;
--left-wing-background: #07f;
--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: #07f;
--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: #07f;
--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: #07f;
--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: 12px 0;
width: 188px;
text-align: center;
margin: 0;
line-height: 25px;
font-weight: 600;
font-size: 16px;
font-family: inherit;
background: none;
outline: none;
color: var(--text);
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
.plane,
.trails {
pointer-events: none;
position: absolute;
}
.plane {
left: 0;
top: 0;
right: 0;
bottom: 0;
filter: drop-shadow(0 2px 4px var(--shadow));
transform: translate(var(--x), var(--y)) rotate(var(--rotate)) translateZ(0);
.left,
.right {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: var(--plane-opacity);
transform: translate(var(--plane-x), var(--plane-y)) translateZ(0);
&:before,
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: var(--border-radius);
transform: translate(var(--part-x, 0.25%), var(--part-y, 0))
translateZ(0);
z-index: var(--z-index, 2);
background: var(--background, var(--left-wing-background));
clip-path: polygon(
var(--first-x, var(--left-wing-first-x))
var(--first-y, var(--left-wing-first-y)),
var(--second-x, var(--left-wing-second-x))
var(--second-y, var(--left-wing-second-y)),
var(--third-x, var(--left-wing-third-x))
var(--third-y, var(--left-wing-third-y))
);
}
}
.left:after {
--part-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 {
--part-x: -0.25%;
--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 {
--part-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);
}
}
.trails {
display: block;
width: 33px;
height: 64px;
top: 16px;
left: 28px;
fill: none;
stroke: var(--trails);
stroke-linecap: round;
stroke-width: 2;
stroke-dasharray: 57px;
stroke-dashoffset: var(--trails-stroke);
transform: rotate(68deg) translateZ(0);
}
span {
display: block;
position: relative;
z-index: 4;
opacity: var(--text-opacity);
&.success {
z-index: 0;
position: absolute;
left: 0;
right: 0;
top: 12px;
transform: translateX(var(--success-x)) translateZ(0);
opacity: var(--success-opacity);
color: var(--success);
svg {
display: inline-block;
vertical-align: top;
width: 16px;
height: 16px;
margin: 4px 4px 0 0;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 14px;
stroke: var(--success);
stroke-dashoffset: var(--success-stroke);
}
}
}
}
.panel {
max-width: 560px;
margin: 0 auto;
font-family: AvenirLT, Avenir, Arial, sans-serif;
.avatar {
display: block;
width: 100px;
}
h1 {
font-size: 32px;
font-weight: 900;
font-family: inherit;
color: #00104b;
margin: 32px 0;
}
.grid {
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
.phone,
.email {
grid-column: 1 / 3;
}
}
p {
color: #667093;
margin: 16px 0 24px 0;
line-height: 1.65;
a {
text-decoration: none;
color: #07f;
}
}
.cta {
display: flex;
button + button {
margin-left: 16px;
}
}
.cancel {
display: block;
cursor: pointer;
position: relative;
border: 0;
padding: 12px 24px;
text-align: center;
margin: 0;
line-height: 25px;
font-weight: 600;
font-size: 16px;
font-family: inherit;
background: none;
outline: none;
color: #07f;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
}
input {
-webkit-appearance: none;
margin: 0;
font-family: inherit;
font-size: 16px;
line-height: 19px;
font-weight: 500;
border-radius: 5px;
padding: 12px 16px;
border: 1px solid #cccfdb;
color: #667093;
background: #fff;
transition: border 0.3s ease;
width: 100%;
outline: none;
&:focus {
border-color: #07f;
}
&::placeholder {
color: #999fb7;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment