Develop Reference

animation cuts out when it runs a second time

const menu = document.querySelector('.pageLinksButton')
const links = document.querySelector('.pageLinks')
menu.addEventListener('click', () => {
menu.classList.toggle("active");
links.classList.toggle("linksActive");
})
body {
background-color: #323232;
position: relative;
}
#keyframes slide {
0% {
opacity: 0.0;
transform: translateY(50px)
}
20% {
opacity: 0.2;
transform: translateY(40px)
}
40% {
opacity: 0.4;
transform: translateY(30px)
}
60% {
opacity: 0.6;
transform: translateY(20px)
}
80% {
opacity: 0.8;
transform: translateY(10px)
}
100% {
opacity: 1.0;
transform: translateY(00px)
}
}
.pageLinks {
display: none;
position: fixed;
top: 5%;
right: 50%;
transition: 1s ease;
}
.pageLinks.linksActive {
display: block;
}
.pageLinks ul {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
list-style: none;
}
.pageLinks ul li {
float: left;
margin: 20px 0px;
animation: slide 0.3s linear;
}
.pageLinks ul li a {
color: #DBDBDB;
font-family: 'poppins', sans-serif;
font-size: 16px;
text-decoration: none;
margin: 0;
}
.pageLinksButton {
cursor: pointer;
transition: transform 800ms;
position: fixed;
top: 0%;
right: 49%;
}
.line {
fill: none;
transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
}
.pageLinksButton.active {
transform: rotate(-45deg);
}
.line:nth-child(1) {
stroke-dasharray: 25 120;
}
.line:nth-child(3) {
stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
stroke-dashoffset: -90px;
}
<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
<path class="line" d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20" />
<path class="line" d="m 70,50 h -40" />
<path class="line" d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20" />
</svg>
<nav class="pageLinks">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
Animation works when links are opened, but not when I close them.
I tried to animate other classes, but it was worse, that's the most I could do

Well, first of your animation is working only in one direction. Secondly, you're using "display: none" property. In your case the moment you "click" to hide menu your elements acquire "display: none" property which make them vanish instantly.
In my example I've just created another animation called "slide-reversed" and changed display: none; for opacity property. However, this isn't a solution, because underneath the elements are still present and "clickable". There isn't css solution to animate properties like display or visibility, so I would recommend either play with width and overflow to achieve what you want, or delay property change via JS.
Example without display:none;
const menu = document.querySelector(".pageLinksButton");
const links = document.querySelector(".pageLinks");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
links.classList.toggle("linksActive");
});
body {
background-color: #323232;
position: relative;
}
#keyframes slide {
0% {
opacity: 0;
transform: translateY(50px);
}
20% {
opacity: 0.2;
transform: translateY(40px);
}
40% {
opacity: 0.4;
transform: translateY(30px);
}
60% {
opacity: 0.6;
transform: translateY(20px);
}
80% {
opacity: 0.8;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(00px);
}
}
#keyframes slide-reverse {
100% {
opacity: 0;
transform: translateY(50px);
}
80% {
opacity: 0.2;
transform: translateY(40px);
}
60% {
opacity: 0.4;
transform: translateY(30px);
}
40% {
opacity: 0.6;
transform: translateY(20px);
}
20% {
opacity: 0.8;
transform: translateY(10px);
}
0% {
opacity: 1;
transform: translateY(00px);
}
}
.pageLinks {
/* display: none; */
opacity: 0;
position: fixed;
top: 15%;
right: 50%;
transition: 0s ease;
transition-delay: 0.3s;
}
.pageLinks.linksActive {
transition: 0.3s ease;
transition-delay: 0s;
opacity: 1;
}
.pageLinks ul {
writing-mode: vertical-rl;
transform: rotate(180deg);
margin: 0;
list-style: none;
}
.pageLinks ul li {
float: left;
margin: 20px 0px;
animation: slide-reverse 0.3s linear;
}
.pageLinks.linksActive ul li {
float: left;
margin: 20px 0px;
animation: slide 0.3s linear;
}
.pageLinks ul li a {
color: #dbdbdb;
font-family: "poppins", sans-serif;
font-size: 16px;
text-decoration: none;
margin: 0;
}
.pageLinksButton {
cursor: pointer;
transition: transform 800ms;
position: fixed;
top: 0%;
right: 49%;
}
.line {
fill: none;
transition: stroke-dasharray 800ms, stroke-dashoffset 800ms;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
}
.pageLinksButton.active {
transform: rotate(-45deg);
}
.line:nth-child(1) {
stroke-dasharray: 25 120;
}
.line:nth-child(3) {
stroke-dasharray: 25 120;
}
.pageLinksButton.active .line:nth-child(1) {
stroke-dashoffset: -90px;
}
.pageLinksButton.active .line:nth-child(3) {
stroke-dashoffset: -90px;
}
<svg class="pageLinksButton hamRotate" viewBox="0 0 100 100" width="50">
<path
class="line"
d="m 70,33 h -40 c 0,0 -8.5,-0.149796 -8.5,8.5 0,8.649796 8.5,8.5 8.5,8.5 h 20 v -20"
/>
<path class="line" d="m 70,50 h -40" />
<path
class="line"
d="m 30,67 h 40 c 0,0 8.5,0.149796 8.5,-8.5 0,-8.649796 -8.5,-8.5 -8.5,-8.5 h -20 v 20"
/>
</svg>
<nav class="pageLinks">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>

Custom Attribute to a modal

what i want to do that when i click a button it opens specific modal like when i click button1 it opens modal1 and so on , how can i achieve this :
HTML :
<div id="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 11111</h2>
<p>I am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 2222</h2>
<p>i am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-effect" class="button">One</div>
<div id="modal-effect" class="button">Two</div>
css :
#modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#modal-container.modal-effect {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect .modal-background .modal-inners {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.modal-effect.out .modal-background .modal-inners {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
#modal-container .modal-background .modal-inners {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
#modal-container .modal-background .modal-inners .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
.buttons {
max-width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.button {
display: inline-block;
text-align: center;
padding: 10px 15px;
margin: 10px;
background: red;
font-size: 18px;
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
color: white;
background: #009bd5;
}
#keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
#keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
Jquery:
$('.button').click(function(){
var buttonId = $(this).attr('id');
$('#modal-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})
$('#modal-container').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
EDIT : Here is the full working modal i want to specify which button and modal is clicked to make it open .
what i want to do i want to add something like modal-numbers attribute when i click on a button it opens specific modal popup.

In your CSS, use class instead of ids unless absolutely necessary. Ids are for identifying individual objects. If you want a group of objects to have a similar behavior then you use CSS classes.
$('.button').click(function(){
var buttonId = $(this).attr('id');
$('#container-'+buttonId).removeClass('out').addClass('modal-effect');
$('body').addClass('modal-active');
})
$('.modal-container').click(function(){
$(this).addClass('out');
$('body').removeClass('modal-active');
});
.modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
.modal-effect {
transform: scaleY(0.01) scaleX(0);
animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect .modal-background .modal-inners {
transform: scale(0);
animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect.out {
transform: scale(1);
animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect.out .modal-background .modal-inners {
animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-effect .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
.modal-effect .modal-background .modal-inners {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
.modal-effect .modal-background .modal-inners .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
.buttons {
max-width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}
.button {
display: inline-block;
text-align: center;
padding: 10px 15px;
margin: 10px;
background: red;
font-size: 18px;
background-color: #efefef;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
color: white;
background: #009bd5;
}
#keyframes unfoldIn {
0% {
transform: scaleY(0.005) scaleX(0);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(1) scaleX(1);
}
}
#keyframes unfoldOut {
0% {
transform: scaleY(1) scaleX(1);
}
50% {
transform: scaleY(0.005) scaleX(1);
}
100% {
transform: scaleY(0.005) scaleX(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="container-modal-one" class="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 11111</h2>
<p>I am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="container-modal-two" class="modal-container">
<div class="modal-background">
<div class="modal-inners">
<h2>I'm a Modal 2222</h2>
<p>i am text</p>
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
</div>
</div>
</div>
<div id="modal-one" class="button">One</div>
<div id="modal-two" class="button">Two</div>

Heart Animation on click

So Id like to create an animation where you click on the heart that there is a circle around that heart that's scales up and then fades away. I've tried to give the SVG a border but nothing shows up? I'm honestly not sure what I'm doing wrong here. Any help would be greatly appreciated. I want it to be similar to the Twitter heart but without the dots around the heart when you click it. Here is a link to my codepen https://codepen.io/Brushel/pen/MEEYgQ
(function() {
var animatedHeart, heartanimation, heartanimationthree;
animatedHeart = document.getElementById('heart1');
heartanimation = document.getElementById('heart2');
heartanimationthree = document.getElementById('heart3');
animatedHeart.addEventListener('click', function() {
return animatedHeart.classList.toggle('fill');
});
heartanimation.addEventListener('click', function() {
return heartanimation.classList.toggle('fillup');
});
heartanimationthree.addEventListener('click', function() {
return heartanimationthree.classList.toggle('heartscale');
});
}).call(this);
body {
max-width: 1200px;
margin: 0 auto;
position: relative;
background: black;
height: 100vh;
}
h2 {
text-align: center;
color: white;
font-weight: 300;
letter-spacing: 0.6px;
font-size: 3em;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
max-width: 1280px;
margin: 10px auto;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
#heart1 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
}
.fill {
-webkit-animation: love .5s linear alternate forwards;
animation: love .5s linear alternate forwards;
stroke: #D22128;
stroke-width: 5px;
}
#-webkit-keyframes love {
0% {
stroke-dashoffset: 1000;
stroke: #D22128;
}
50% {
stroke-dashoffset: 0;
stroke: #D22128;
fill: #D22128;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
stroke: transparent;
fill: #D22128;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes love {
0% {
stroke-dashoffset: 1000;
stroke: #D22128;
}
50% {
stroke-dashoffset: 0;
stroke: #D22128;
fill: #D22128;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
100% {
stroke: transparent;
fill: #D22128;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#heart2 {
max-height: 70px;
fill: white;
cursor: pointer;
}
.fillup {
-webkit-animation: lovebutton .5s alternate forwards;
animation: lovebutton .5s alternate forwards;
}
#-webkit-keyframes lovebutton {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
25% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
fill: #D22128;
}
100% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
}
#keyframes lovebutton {
0% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
25% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
fill: #D22128;
}
100% {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
fill: #D22128;
}
}
#heart3 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
}
.heartscale {
-webkit-animation: heart-beat .5s alternate forwards;
animation: heart-beat .5s alternate forwards;
stroke-width: 0px;
}
#-webkit-keyframes heart-beat {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
fill: #D22128;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
fill: #D22128;
}
}
#keyframes heart-beat {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
fill: #D22128;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
fill: #D22128;
}
}
<body>
<div class="container">
<div class="col-12">
<h2>Animated Hearts</h2>
<div class="circle">
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart1">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
<!-- End of the first Heart -->
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart2">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
<!-- End of second heart -->
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart3">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
</div>
</body>

the last one looks pretty close ! I think there is a simpler (sort of simpler) way to do this in css.
Nicolas Escoffer has a great article about it here:
Article:
https://blog.prototypr.io/twitter-s-heart-animation-in-full-css-b1c00ca5b774
Code Pen:
https://codepen.io/OxyDesign/pen/avXVbo
otherwise I would suggest creating a keyframes animation that uses the border of the circle div you have created. Be sure to set the circle div outside of the heart .svg so it is not wrapping the element:
I made an example for you below based on your original codepen:
#HTML:
<body>
<div class="container">
<div class="col-12">
<h2> </h2>
<br>
<div id="circle" class="circle"></div>
<svg class="mo-icon__svg" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="heart4">
<g id="icon_x5F_wishlist">
<g transform="translate(0,-952.36218)">
<path class="st0" id="st0" d="M15.33293,980.7616c-19.11968,19.8092-19.10147,51.68518,0,71.51379l84.61456,87.86926
c28.23759-29.25574,56.47517-58.51135,84.71275-87.76758c19.11969-19.80969,19.11969-51.70477,0-71.51422
c-19.12007-19.80945-49.90512-19.80994-69.02521,0l-15.58933,16.15155l-15.68754-16.25305
c-19.12008-19.80945-49.90513-19.80945-69.02521,0L15.33293,980.7616z"/>
</g>
</g>
</svg>
</div>
</body>
#SCSS:
body {
max-width: 1200px;
margin: 0 auto;
position: relative;
background: black;
height: 100vh;
color: white;
}
h2{
text-align: center;
color: white;
font-weight: 300;
letter-spacing: 0.6px;
font-size: 3em;
user-select: none;
}
// Set up basic Grid
.container {
display: block;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
max-width: 1280px;
margin: 10px auto;
padding-left: 50%;
margin-left: auto;
margin-right: auto;
}
.col-12{
flex: 0 0 100%;
}
// Fourth Animation
#heart4 {
max-height: 70px;
fill: white;
stroke: white;
cursor: pointer;
position: relative;
width: 5rem;
}
.dot-animation {
position: relative;
}
.dot {
height: 10px;
width: 10px;
background: white;
border-radius: 50%;
position: absolute;
&:nth-child(1){
background: #D22128;
left: 49.7%;
top: 75px;
}
&:nth-child(2){
background: #D22128;
left: 49.4%;
bottom: 8%;
}
&:nth-child(3){
background: #D22128;
left: 53.5%;
top: 30px;
}
&:nth-child(4){
background: #D22128;
left: 45%;
top: 30px;
}
}
.bands {
animation: snap 1s forwards;
stroke-width: 0;
}
#keyframes snap {
from {
transform: scale3d(1, 1, 1);
filter: brightness(0.5);
}
30% {
transform: scale3d(1.25, 0.75, 1); }
40% {
transform: scale3d(0.75, 1.25, 1); }
50% {
transform: scale3d(1.15, 0.85, 1); }
65% {
transform: scale3d(.95, 1.05, 1); }
75% {
transform: scale3d(1.05, .95, 1); }
to {
transform: scale3d(1, 1, 1);
fill: #D22128;
filter: brightness(1);
}
}
.circle {
position: absolute;
display: block;
border: 1px solid white;
margin-left: 2.5rem;
top: 8rem;
}
.burst {
animation: burst .5s forwards;
}
#keyframes burst {
0% {
border: 1px solid white;
border-radius: 50% 50%;
width: 0.25rem;
height: 0.25rem;
}
100% {
border: 5px solid white;
border-radius: 50% 50%;
width: 7rem;
height: 7rem;
margin-left: -.90rem;
margin-top: -2.45rem;
opacity: 0;
z-index: 999;
}
}
#JS:
# Grab Element
heartanimationfour = document.getElementById('heart4')
circle = document.getElementById('circle')
# Add event listener for the click
heartanimationfour.addEventListener 'click', ->
heartanimationfour.classList.toggle 'bands',
circle.classList.toggle 'burst'
https://codepen.io/cwoolf123/pen/wvMdyKq?editors=1111

Target checked checkbox in jQuery

I have HTML, CSS and jQuery code for a checkbox. But I was recently making some changes in the HTML structure and now the jQuery is no longer working. And since I'm a beginner, I don't know how to fix this.
Can someone take a look and just let me know what jQuery should be targeting instead, so it'll change the styling of the elements when the checkbox is checked?
$('.form-check').click(function(){
$(this).closest('.list-group-item').find('.incomplete').css('display', (this.checked)?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', (this.checked)?'block':'none')
$(this).closest('.list-group-item').css('background-color',(this.checked)?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (this.checked)?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (this.checked)?'#fff':'#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

You are checking the .form-check if it is checked.. It should be the checkbox inside the .form-check.
Find the checkbox inside the .form-check first and the check for its prop if checked or not as follows:
$('.form-check').click(function() {
var checkbox = $(this).find('input[type=checkbox]')
$(this).closest('.list-group-item').find('.incomplete').css('display', (checkbox.prop('checked')) ? 'none' : 'block')
$(this).closest('.list-group-item').find('.complete').css('display', (checkbox.prop('checked')) ? 'block' : 'none')
$(this).closest('.list-group-item').css('background-color', (checkbox.prop('checked')) ? '#4CAF50' : '')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (checkbox.prop('checked')) ? '#fff' : '#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (checkbox.prop('checked')) ? '#fff' : '#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+svg {
display: none;
}
input[type=checkbox]:checked+svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div>
<!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

The problem is with your this.isChecked, it is always undefined, so it always evaluates to false. I replaced it with isChecked, getting the value from the checked property of the checkbox belonging to this li item.
$('.form-check').click(function(){
var isChecked = $(this).find('#checkbox').prop('checked');
$(this).closest('.list-group-item').find('.incomplete').css('display', isChecked?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', isChecked?'block':'none')
$(this).closest('.list-group-item').css('background-color',isChecked?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', isChecked?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', isChecked?'#fff':'#ababab')
})
.custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
#keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
#keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
#keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>

SVG/CSS animated icon not working

I'm trying to implement an animated menu icon I found on codepen by Balaj Marius. The design is here.
When I try it in my project (or even independently in separate files), it doesn't work. The icon appears, but the javascript doesn't seem to be running. I'm assuming it's an obvious answer, but it's currently beating me. Any ideas on how to get it up and running?
Here is how I have it:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/javascript" href="js/main.js">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="content">
<h2>Scroll to see the magic.</h2>
<div class="header__fake">
<div class="icn__wrap">
<i class="icn__hamburger"></i>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
</svg>
</div>
<i class="btm__border"></i>
</div>
<h1>Tah-da!<span>Now scroll back up.</span></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
css:
body {
background: #02021a url("https://raw.githubusercontent.com/balajmarius/hamburger-animation/master/assets/img/bg.jpg") no-repeat 0 0;
-webkit-background-size: 100% auto;
background-size: 100% auto;
color: #fff;
font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
font-weight:lighter;
letter-spacing:1px;
}
.content {
width: 320px;
position: relative;
margin: 0 auto;
}
.content h2 {
margin: 35px 0 0;
}
.content h1 {
text-align: center;
margin: 1000px 0 200px;
}
.content h1 span {
display: block;
width: 100%;
margin: 5px 0 0;
opacity: .5;
}
.content .header__fake {
position: fixed;
top: 15px;
left: 50%;
margin-left: -160px;
width: 320px;
}
.content .header__fake i {
display: block;
}
.content .header__fake .btm__border {
height: 1px;
background: #fff;
position: absolute;
bottom: 6px;
left: 0;
right: 0;
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
.content .header__fake .icn__wrap {
cursor: pointer;
float: right;
width: 58px;
position: relative;
height: 58px;
margin-right: -20px;
}
.content .header__fake .icn__wrap .icn__hamburger {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-6px);
-ms-transform: translateX(-50%) translateY(-6px);
transform: translateX(-50%) translateY(-6px);
display: block;
width: 18px;
height: 1px;
z-index: 999;
background: #fff;
}
.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
content: "";
float: left;
display: block;
width: 100%;
height: 1px;
background: #fff;
margin: 5px 0 0;
}
.content .header__fake .icn__wrap .icn__hamburger:before {
margin: 6px 0 0;
}
.content .header__fake .icn__wrap svg {
z-index: 10;
}
.content .header__fake .icn__wrap svg circle {
fill: none;
stroke: #fff;
stroke-width: .5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 39 39;
stroke-dashoffset: -39;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.animated .btm__border {
left: 100%;
right: 4px;
}
.content .header__fake.animated svg circle {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s;
transition: stroke-dashoffset 0.5s;
}
.content .header__fake.fix .btm__border {
-webkit-animation: fix 0.2s linear;
animation: fix 0.2s linear;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
right: 5px;
}
#-webkit-keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
#keyframes fix {
from {
right: 5px;
}
to {
right: 0;
}
}
js:
$(document).ready(function(){
console.log("ready");
$header = $('.header__fake');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
});