Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.pug

Created Feb 13, 2017
Embed
What would you like to do?
Push Notifications and Newsletter Signup Form with Transitions
.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
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
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
$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);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.