Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Nov 9, 2017
Embed
What would you like to do?
Submit Button Animation
<div class="send-button">
<span class="text">send</span>
<span class="icon-wrapper">
<span class="icon-1 ion-paper-airplane"></span>
<span class="icon-2 ion-checkmark"></span>
</span>
</div>
$(() => {
var $sendBtn = $('.send-button'),
$iWrapper = $('.icon-wrapper'),
$i1 = $('.icon-1'),
$i2 = $('.icon-2');
function animationEvent() {
var t,
el = document.createElement('fakeelement');
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'animationend',
WebkitAnimation: 'webkitAnimationEnd'
};
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
}
$sendBtn.on('click', e => {
$iWrapper.css('color', '#66bb6a');
$iWrapper.addClass('icon-wrapper-animation');
$sendBtn.addClass('clicked');
$i1.delay(900);
$i1.fadeTo(300, 0);
$i2.delay(900);
$i2.fadeTo(300, 1);
});
$sendBtn.on(animationEvent(), e => {
if (e.originalEvent.animationName == 'input-shadow') {
$sendBtn.removeClass('clicked');
}
});
$iWrapper.on(animationEvent(), e => {
if (e.originalEvent.animationName == 'icon-animation') {
$iWrapper.removeClass('icon-wrapper-animation');
setTimeout(reset, 1200);
}
});
function reset() {
$i1.fadeTo(250, 1);
$i2.fadeTo(250, 0);
$iWrapper.css('color', '#f8bbd0');
}
}); // end of document ready
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
// helper
html
box-sizing: border-box
font-size: 62.5%
overflow: hidden
*
padding: 0
margin: 0
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
box-sizing: inherit
&::after, &::before
box-sizing: inherit
%center
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
=size($w, $h)
width: $w
height: $h
=font-size($sizeValue: 1.6)
font-size: ($sizeValue * 10) + px
font-size: $sizeValue + rem
// colors
$green: #66bb6a
$pink: #c51162
$pink-light: #d81b60
$pink-white: #f8bbd0
// animations
@keyframes icon-animation
0%
transform: rotate(0deg) scale(1)
33%
transform: rotate(-120deg) scale(4)
66%
transform: rotate(-240deg) scale(4)
100%
transform: rotate(-360deg) scale(1)
@keyframes input-shadow
0%
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2)
40%
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
50%
box-shadow: none
70%
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
100%
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2)
// animation related classes
.icon-wrapper-animation
animation: icon-animation 1.5s linear
transition: color 0.6s ease
color: $green
.clicked
transform: translate(-50%, calc(-50% + 1px)) !important
transition: transform .15s ease
animation: input-shadow .15s ease
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2)
> .text
transform: translateY(1px)
transition: transform .15s ease-out
// corpus
body
background-color: $pink-light
.send-button
@extend %center
background-color: $pink
+size(250px, 45px)
border-radius: 2px
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3)
cursor: pointer
user-select: none
transition: transform .15s
text-shadow: 1px 2px 1px rgba(77, 9, 36 ,0.6)
.text
position: absolute
left: 10px
+font-size(2.2)
letter-spacing: 1px
line-height: 45px
font-family: "Roboto"
font-weight: 700
color: $pink-white
text-transform: uppercase
.icon-wrapper
position: absolute
right: -65px
bottom: -10px
+size(200px, 200px)
border-radius: 50%
line-height: 45px
color: $pink-white
[class*="icon-"]
position: absolute
left: 100px
bottom: 10px
transition: color 0.6s ease
.icon-1
transform: rotate(15deg)
+font-size(2.3)
opacity: 1
.icon-2
opacity: 0
+font-size(2.5)
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment