Skip to content

Instantly share code, notes, and snippets.

@PauliusKrutkis
Last active November 4, 2017 16:40
Show Gist options
  • Save PauliusKrutkis/15b96d20062dbe667c1894db70b4b0a2 to your computer and use it in GitHub Desktop.
Save PauliusKrutkis/15b96d20062dbe667c1894db70b4b0a2 to your computer and use it in GitHub Desktop.
Radial animation button
<!-- no-animation class is required -->
<!-- set data-circle with a value for either a complete or half animation: -->
<!-- 1 - for complete -->
<!-- 0 - for half -->
<a class="button-circle no-animation" data-circle="1" href="#">1</a>
// transform mixins just adds browser specific prefixes, can be replaced with normal transform if needed
@mixin button-circle(
$width,
$height,
$border-width,
$border-placeholder-color,
$border-color,
$background-color
) {
position: relative;
display: inline-block;
width: $width;
height: $height;
overflow: hidden;
font-size: 18px;
text-align: center;
text-decoration: none;
line-height: $height;
.button-circle__placeholder {
position: relative;
z-index: 2;
}
.button-circle__shape {
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: $border-placeholder-color;
border-radius: 100%;
@include transform(rotate(180deg) scaleX(-1));
}
&.animation-back .button-circle__shape {
@include transform(rotate(180deg) scaleX(1));
}
.button-circle__shape:after {
content: '';
position: absolute;
top: $border-width;
left: $border-width;
width: $width - $border-width * 2;
height: $height - $border-width * 2;
border-radius: 100%;
background-color: $background-color;
}
.button-circle__shape span {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.button-circle__item {
position: absolute;
border-radius: 999px;
width: 100%;
height: 100%;
background-color: $border-color;
transition: transform .25s linear;
}
.button-circle__shape-first {
left: 0;
}
.button-circle__shape-second {
left: 50%;
}
.button-circle__shape-first .button-circle__item {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0 50%;
transition: transform .5s ease-out;
}
.button-circle__shape-second .button-circle__item {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transform-origin: 100% 50%;
transition: transform .25s linear;
}
&.animation .button-circle__shape-first .button-circle__item {
@include transform(rotate(-180deg));
transition-delay: .25s;
}
&.animation .button-circle__shape-second .button-circle__item {
@include transform(rotate(-180deg));
}
&.animation-back .button-circle__shape-first .button-circle__item {
transition: transform .25s linear;
transition-delay: 0s;
@include transform(rotate(0));
}
&.animation-back .button-circle__shape-second .button-circle__item {
@include transform(rotate(0));
transition-delay: 0.25s;
}
}
$('[data-circle]').each(function () {
$(this).html('<span class="button-circle__placeholder">' + $(this).html() + '</span>' +
'<span class="button-circle__shape"><span class="button-circle__shape-first"><i class="button-circle__item"></i></span>' +
'<span class="button-circle__shape-second"><i class="button-circle__item"></i></span></span>');
$(this).mouseenter(function (e, param) {
if (!$(this).hasClass('no-animation')) {
return;
}
if (param) {
$(this).addClass('complete');
}
$(this)
.removeClass('no-animation')
.addClass('animation');
var count = 0;
$(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function () {
if ($(this).data('circle') === 0 && !$(this).hasClass('complete')) {
return;
}
if (count === 1) {
$(this).addClass('animation-back');
}
count++;
if (count === 4) {
$(this).addClass('no-animation')
.removeClass('animation')
.removeClass('animation-back')
.removeClass('complete');
count = 0;
}
});
});
});
// trigger animation with js if needed
// optional param is there if you need the complete animation
// true for complete
// false for half
setTimeout(function () {
$('[data-circle]').trigger('mouseenter', true);
}, 100);
.button-circle {
@include button-circle(60px, 60px, 5px, gray, black, white);
}
.no-animation .button-circle__item {
transition: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment