.bookmark {
--background-default: #fff;
--background-hover: #FAFBFF;
--text-color: #404660;
--icon-color-default: #8A91B4;
--icon-color-active: #F04949;
--default-position: 32px;
--default-y: 0px;
--icon-background-height: 19px;
--shadow: #{rgba(#001384, .08)};
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
outline: none;
background: none;
border: none;
padding: 2px 18px 2px 5px;
margin: 0;
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: var(--text-color);
display: flex;
align-items: center;
cursor: pointer;
position: relative;
&.dark {
--background-default: #1E2235;
--background-hover: #171827;
--text-color: #F9FAFF;
--icon-color-default: #8A91B4;
--icon-color-active: #F04949;
--shadow: #{rgba(#001384, .16)};
}
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 6px;
backface-visibility: hidden;
box-shadow: 0 var(--shadow-y, 2px) var(--shadow-blur, 3px) var(--shadow);
background: var(--background, var(--background-default));
transform: scale(var(--scale-x, 1), var(--scale-y, 1)) translateZ(0);
transition: box-shadow .2s, transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background .2s;
}
&:active {
--shadow-y: 1px;
--shadow-blur: 2px;
--scale-x: .975;
--scale-y: .94;
}
&:hover {
--background: var(--background-hover);
}
&.marked {
--icon-color: var(--icon-color-active);
}
.icon {
position: relative;
z-index: 1;
transform: scale(.62);
&:before {
content: '';
position: absolute;
top: 5px;
left: 9px;
width: 18px;
height: 19px;
border-radius: 1px;
clip-path: inset(0 -1px var(--icon-background-height) -1px round 1px);
background: var(--icon-color, var(--icon-color-default));
transition: background var(--duration, .5s) ease .01s;
}
svg {
display: block;
width: 36px;
height: 36px;
stroke: var(--icon-color, var(--icon-color-default));
stroke-width: 2px;
stroke-linejoin: round;
stroke-linecap: round;
position: relative;
z-index: 1;
transform: translateZ(0);
clip-path: inset(5px 0 0 0);
path {
fill: var(--fill, var(--background, var(--background-default)));
transition: fill var(--duration, .5s) ease .01s, stroke var(--duration, .5s) ease .01s;
&.default {
--fill: var(--default-fill, var(--background, var(--background-default)));
clip-path: circle(var(--default-position) at 50% 100%);
}
&.filled {
--fill: var(--icon-color, var(--icon-color-default));
}
&.default,
&.filled {
transform: translateY(var(--default-y));
}
}
}
}
span {
position: relative;
z-index: 1;
display: block;
margin-left: -2px;
}
}
.bookmark {
&.dark {
--background-default: #1E2235;
--background-hover: #171827;
--text-color: #F9FAFF;
--icon-color-default: #8A91B4;
--icon-color-active: #F04949;
--shadow: #{rgba(#001384, .16)};
}
}
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;
font-family: 'Inter', Arial;
justify-content: center;
align-items: center;
background: #ECEFFC;
.bookmark {
margin: 0 16px;
}
.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;
}
}
}
View Compiled
gsap.registerPlugin(MorphSVGPlugin)
document.querySelectorAll('.bookmark').forEach(button => {
button.addEventListener('pointerdown', e => {
if(!button.classList.contains('marked')) {
return
}
gsap.to(button.querySelectorAll('.default, .filled'), {
morphSVG: 'M26 6H10V18C10 22.6863 11 28 11 28C11 28 17.5273 19.5 18 19.5C18.4727 19.5 25 28 25 28C25 28 26 22.6863 26 18V6Z',
duration: .15
})
})
button.addEventListener('click', e => {
e.preventDefault()
if(button.classList.contains('animated')) {
return
}
button.classList.add('animated')
if(button.classList.contains('marked')) {
button.classList.remove('marked')
gsap.fromTo(button.querySelectorAll('.default, .filled'), {
morphSVG: 'M26 6H10V18C10 22.6863 11 28 11 28C11 28 17.5273 19.5 18 19.5C18.4727 19.5 25 28 25 28C25 28 26 22.6863 26 18V6Z',
duration: .15
}, {
keyframes: [ {
morphSVG: 'M26 6H10V18C10 22.6863 8 31 8 31C8 31 15.9746 26.5 18 23.5C20.0254 26.5 28 31 28 31C28 31 26 22.6863 26 18V6Z',
duration: .15
}, {
morphSVG: 'M26 6H10V18V30C10 30 17.9746 23.5 18 23.5C18.0254 23.5 26 30 26 30V18V6Z',
duration: .6,
ease: 'elastic.out(1, .7)',
onComplete() {
button.classList.remove('animated')
}
}]
})
gsap.to(button, {
'--default-position': '24px',
duration: .2,
clearProps: true
})
return
}
gsap.to(button, {
'--icon-background-height': '0px',
duration: .125,
delay: .3
})
gsap.to(button, {
'--default-y': '-28px',
duration: .4
})
gsap.to(button.querySelector('.corner'), {
keyframes: [{
morphSVG: 'M10 6C10 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 28 8.5 28 10H8C8 8.5 10 6 10 6Z',
ease: 'none',
duration: .125
}, {
morphSVG: 'M9.99999 6C9.99999 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 31 10.5 26 14H9.99999C4.99999 10.5 9.99999 6 9.99999 6Z',
ease: 'none',
duration: .15
}, {
morphSVG: 'M7.99998 16.5C7.99998 16.5 9.87579 22.5 18 22.5C26.1242 22.5 28 16.5 28 16.5C28 16.5 31 20 26 23.5H9.99998C4.99998 20 7.99998 16.5 7.99998 16.5Z',
ease: 'power1.in',
duration: .125,
onComplete() {
gsap.set(button.querySelector('.corner'), {
'--duration': '0s',
fill: 'var(--icon-color, var(--icon-color-default))',
delay: .05
})
}
}, {
morphSVG: 'M8 28C8 28 12.8758 28.5 18 25.5C23.1242 28.5 28 27.5 28 27.5C28 27.5 26 24 26 23.5H10C10 25 8 28 8 28Z',
ease: 'none',
duration: .125,
onComplete() {
gsap.set(button.querySelector('.corner'), {
'--duration': '.5s',
onComplete() {
button.classList.add('marked')
}
})
}
}, {
morphSVG: 'M10 30C10 30 17.8758 23.5 18 23.5C18.1242 23.5 26 30 26 30C26 30 26 23.5 26 23H10C10 24.5 10 30 10 30Z',
ease: 'elastic.out(1, .7)',
duration: .5,
onComplete() {
button.classList.remove('animated')
gsap.set(button, {
'--default-y': '0px',
'--default-position': '0px',
'--icon-background-height': '19px'
})
gsap.set(button.querySelector('.corner'), {
morphSVG: 'M10 6C10 6 14.8758 6 18 6C21.1242 6 26 6 26 6C26 6 26 6 26 6H10C10 6 10 6 10 6Z',
clearProps: true
})
}
}]
})
})
})
