animation cuts out when it runs a second time - javascript

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>

Related

Row Low / Minimalistic One page

I tried to figure out, how the website Link is made, especially the SVG fill out and the polygon which is alternating. But yet I did not achieve to make a suitable css.
What I want is:
Make a alternating background like them
and also the svg fillings.
They use also row low but I could not install it on my ubuntu, since i am using Ubuntu 22.04, does anybody know a suitable responsive grid layout for rowlow?
I made a CSS:
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {
height: 100vh;
display: flex; }
15% {
height: 100vh;
display: flex;
color: white; }
100% {
height: 0px;
display: none;
color: black; } }
/* Standard syntax */
#keyframes example {
0% {
height: 100vh;
display: flex; }
15% {
height: 100vh;
display: flex;
color: white; }
100% {
height: 0px;
display: none;
color: black; } }
#keyframes svg-animation {
to {
stroke-dashoffset: 0; } }
#keyframes fill {
from {
fill: transparent; }
to {
fill: white; } }
#keyframes fade-logo {
0% {
opacity: 0; }
80% {
opacity: 0; }
100% {
opacity: 100%; } }
#keyframes no-scroll {
0% {
overflow: hidden; }
99% {
overflow: hidden; }
100% {
overflow: auto; } }
.menu-btn {
position: absolute;
z-index: 3;
right: 35px;
top: 25px;
cursor: pointer;
transition: all .75s ease-out; }
.menu-btn .btn-line {
width: 30px;
height: 3px;
margin: 0 0 5px 0;
background: black;
transition: all .75s ease-out; }
.menu-btn.close {
transform: rotate(180deg); }
.menu-btn.close .btn-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px); }
.menu-btn.close .btn-line:nth-child(2) {
opacity: 0; }
.menu-btn.close .btn-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px); }
.menu {
position: fixed;
top: 0;
width: 100%;
z-index: 2; }
.menu .menu-nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
display: none;
justify-content: center;
transition-property: none; }
.menu .menu-nav.mobile {
display: flex;
background-color: pink;
flex-direction: column;
height: 100vh;
width: 100vw;
position: absolute;
z-index: 2;
left: 100%; }
.menu .menu-nav.mobile.show {
left: 0; }
.menu .menu-nav li {
float: left;
text-align: center;
color: black;
padding: 25px 16px;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
font-size: .85rem;
letter-spacing: .2rem; }
.menu .menu-nav li:hover {
cursor: pointer;
color: #87c6bd; }
#content_1 {
padding: 30px 0;
text-align: center;
height: 100vh;
background-color: #F3F3F3;
clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%); }
#content_1 .logo {
width: 220px;
height: auto;
animation: fade-logo 5s ease forwards; }
#content_2 {
margin-top: 0;
position: relative;
padding-top: 100px;
background: #FFF; }
#content_2 .gem-image {
transform: translate(-50%, -80%);
width: 30%;
max-width: 400px;
min-width: 250px;
height: auto;
left: 50%;
top: 0;
position: absolute;
z-index: 200; }
.loading-svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
#svg_logo {
width: 220px;
height: auto;
animation: fill 2s ease forwards 2.25s; }
#svg_logo path:nth-child(1) {
stroke-dasharray: 493px;
stroke-dashoffset: 493px;
animation: svg-animation .75s ease forwards; }
#svg_logo path:nth-child(2) {
stroke-dasharray: 364px;
stroke-dashoffset: 364px;
animation: svg-animation .75s ease forwards 0.15s; }
#svg_logo path:nth-child(3) {
stroke-dasharray: 329px;
stroke-dashoffset: 329px;
animation: svg-animation .75s ease forwards 0.3s; }
#svg_logo path:nth-child(4) {
stroke-dasharray: 162px;
stroke-dashoffset: 162px;
animation: svg-animation .75s ease forwards 0.45s; }
#svg_logo path:nth-child(5) {
stroke-dasharray: 386px;
stroke-dashoffset: 386px;
animation: svg-animation .75s ease forwards .6s; }
#svg_logo path:nth-child(6) {
stroke-dasharray: 77px;
stroke-dashoffset: 77px;
animation: svg-animation .75s ease forwards .75s; }
#svg_logo path:nth-child(7) {
stroke-dasharray: 253px;
stroke-dashoffset: 253px;
animation: svg-animation .75s ease forwards .9s; }
#svg_logo path:nth-child(8) {
stroke-dasharray: 314px;
stroke-dashoffset: 314px;
animation: svg-animation .75s ease forwards 1.05s; }
#svg_logo path:nth-child(9) {
stroke-dasharray: 236px;
stroke-dashoffset: 236px;
animation: svg-animation .75s ease forwards 1.20s; }
#svg_logo path:nth-child(10) {
stroke-dasharray: 329px;
stroke-dashoffset: 329px;
animation: svg-animation .75s ease forwards 1.35s; }
#svg_logo path:nth-child(11) {
stroke-dasharray: 361px;
stroke-dashoffset: 361px;
animation: svg-animation .75s ease forwards 1.5s; }
#svg_logo path:nth-child(12) {
stroke-dasharray: 253px;
stroke-dashoffset: 253px;
animation: svg-animation .75s ease forwards 1.65s; }
#svg_logo path:nth-child(13) {
stroke-dasharray: 162px;
stroke-dashoffset: 162px;
animation: svg-animation .75s ease forwards 1.8s; }
#svg_logo path:nth-child(14) {
stroke-dasharray: 310px;
stroke-dashoffset: 310px;
animation: svg-animation .75s ease forwards 1.95s; }
#svg_logo path:nth-child(15) {
stroke-dasharray: 223px;
stroke-dashoffset: 223px;
animation: svg-animation .75s ease forwards 2.1s; }
#svg_logo path:nth-child(16) {
stroke-dasharray: 223px;
stroke-dashoffset: 223px;
animation: svg-animation .75s ease forwards 2.25s; }
* {
box-sizing: border-box; }
body {
height: 100%;
margin: 0;
font-family: 'Lato', Tahoma, Verdana, sans-serif;
background-color: white;
animation: no-scroll 5s ease forwards; }
h1, h2, h3 {
margin: 0;
font-weight: 600; }
a {
color: white;
text-decoration: none; }
#load {
content: '';
background-color: black;
width: 100%;
color: white;
text-align: center;
letter-spacing: .3rem;
display: flex;
height: 0;
justify-content: center;
align-items: center;
height: 100vh;
-webkit-animation: example 4s ease forwards 2.25s;
/* Safari 4.0 - 8.0 */
animation-name: example 4s ease forwards 2.25s; }
.headline {
position: relative;
text-align: center;
top: 0;
left: 0;
width: 100%;
z-index: 200;
font-size: 2rem;
letter-spacing: 1rem;
font-weight: 900;
margin-top: 100px; }
.headline:after {
width: 100px;
margin: 70px auto;
content: '';
display: block;
background: #1D1D1F;
height: 4px; }
The index.html is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>We Ain't Plastic Clone</title>
<meta name="description" content="We Ain't Plastic Clone">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css?v=1.0">
<!-- <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="load"></div>
<div class="loading-svg">
<svg id="svg_logo" width="1252" height="355" viewBox="0 0 1252 355" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.968 202H16.376L1.49597 134.8H15.8L24.92 180.4L38.072 134.8H51.128L64.184 180.208L73.304 134.8H87.128L72.248 202H57.656L44.312 155.056L30.968 202Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M121.624 202V134.8H173.272V146.896H135.544V162.256H160.408V173.968H135.544V189.904H173.656V202H121.624Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M248.22 202L275.868 134.8H291.996L319.26 202H304.188L297.372 184.336H269.628L262.716 202H248.22ZM273.948 173.2H293.148L283.644 148.432L273.948 173.2Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M350.884 202V134.8H364.804V202H350.884Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M402.96 134.8H416.208L449.616 178.288V134.8H462.672V202H450.384L416.112 157.072V202H402.96V134.8Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M503.955 130.864H517.587L507.219 156.112H497.331L503.955 130.864Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M549.012 147.088V134.8H608.148V147.088H585.588V202H571.668V147.088H549.012Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M687.109 202V134.8H720.805C724.069 134.8 727.077 135.344 729.829 136.432C732.645 137.456 735.045 138.896 737.029 140.752C739.013 142.608 740.549 144.848 741.637 147.472C742.789 150.032 743.365 152.848 743.365 155.92C743.365 158.928 742.789 161.712 741.637 164.272C740.549 166.768 738.981 168.944 736.933 170.8C734.949 172.656 732.581 174.096 729.829 175.12C727.077 176.144 724.069 176.656 720.805 176.656H701.029V202H687.109ZM719.269 146.8H701.029V165.136H719.269C722.277 165.136 724.677 164.304 726.469 162.64C728.325 160.976 729.253 158.768 729.253 156.016C729.253 153.264 728.325 151.056 726.469 149.392C724.677 147.664 722.277 146.8 719.269 146.8Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M778.373 202V134.8H792.293V189.712H829.061V202H778.373Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M859.549 202L887.196 134.8H903.325L930.589 202H915.516L908.701 184.336H880.956L874.044 202H859.549ZM885.276 173.2H904.477L894.972 148.432L885.276 173.2Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M958.328 191.344L966.296 181.36C970.2 184.752 973.944 187.248 977.528 188.848C981.176 190.384 985.016 191.152 989.048 191.152C993.208 191.152 996.536 190.384 999.032 188.848C1001.53 187.312 1002.78 185.264 1002.78 182.704C1002.78 180.4 1001.91 178.608 1000.18 177.328C998.52 176.048 995.704 175.088 991.736 174.448L978.392 172.144C972.632 171.184 968.248 169.168 965.24 166.096C962.296 163.024 960.824 159.056 960.824 154.192C960.824 147.92 963.192 142.96 967.928 139.312C972.728 135.664 979.192 133.84 987.32 133.84C992.184 133.84 997.08 134.672 1002.01 136.336C1007 138 1011.35 140.304 1015.06 143.248L1007.58 153.616C1003.99 150.864 1000.47 148.848 997.016 147.568C993.56 146.224 990.008 145.552 986.36 145.552C982.648 145.552 979.672 146.256 977.432 147.664C975.192 149.008 974.072 150.832 974.072 153.136C974.072 155.184 974.808 156.784 976.28 157.936C977.752 159.088 980.216 159.92 983.672 160.432L996.344 162.544C1003 163.632 1007.99 165.776 1011.32 168.976C1014.71 172.112 1016.41 176.272 1016.41 181.456C1016.41 187.984 1013.82 193.2 1008.63 197.104C1003.51 201.008 996.664 202.96 988.088 202.96C982.712 202.96 977.4 201.936 972.152 199.888C966.968 197.84 962.36 194.992 958.328 191.344Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1044.47 147.088V134.8H1103.61V147.088H1081.05V202H1067.13V147.088H1044.47Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1137.33 202V134.8H1151.25V202H1137.33Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M1223.01 190.096C1226.53 190.096 1229.83 189.36 1232.9 187.888C1235.97 186.416 1238.69 184.304 1241.06 181.552L1250.18 190.576C1246.98 194.352 1242.88 197.36 1237.89 199.6C1232.96 201.84 1227.87 202.96 1222.63 202.96C1217.57 202.96 1212.83 202.064 1208.42 200.272C1204.07 198.48 1200.29 196.048 1197.09 192.976C1193.89 189.904 1191.36 186.256 1189.51 182.032C1187.71 177.808 1186.82 173.264 1186.82 168.4C1186.82 163.536 1187.75 158.992 1189.6 154.768C1191.46 150.48 1193.99 146.8 1197.19 143.728C1200.39 140.656 1204.16 138.224 1208.51 136.432C1212.93 134.64 1217.63 133.744 1222.63 133.744C1228 133.744 1233.22 134.896 1238.27 137.2C1243.33 139.44 1247.43 142.48 1250.56 146.32L1241.15 155.632C1238.79 152.688 1236 150.448 1232.8 148.912C1229.6 147.312 1226.21 146.512 1222.63 146.512C1219.62 146.512 1216.77 147.088 1214.08 148.24C1211.46 149.328 1209.19 150.864 1207.27 152.848C1205.35 154.768 1203.84 157.072 1202.75 159.76C1201.67 162.384 1201.12 165.264 1201.12 168.4C1201.12 171.472 1201.67 174.352 1202.75 177.04C1203.91 179.664 1205.44 181.936 1207.36 183.856C1209.35 185.776 1211.65 187.312 1214.27 188.464C1216.96 189.552 1219.87 190.096 1223.01 190.096Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M635.731 88.853L635.4 89.564H636.184H649.432H649.751L649.885 89.2749L690.493 2.01094L690.824 1.29999H690.04H676.792H676.473L676.339 1.58904L635.731 88.853Z" stroke="white"/>
<path d="M521.731 352.853L521.4 353.564H522.184H535.432H535.751L535.885 353.275L576.493 266.011L576.824 265.3H576.04H562.792H562.473L562.339 265.589L521.731 352.853Z" stroke="white"/>
</svg>
</div>
<nav class="menu">
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
Gems
</li>
<li class="nav-item">
Work
</li>
<li class="nav-item">
Letters
</li>
<li class="nav-item">
Profile
</li>
<li class="nav-item">
Workflow
</li>
<li class="nav-item">
Content
</li>
</ul>
</nav>
<main>
<div id="content">
<section id="content_1">
<img class="logo" src="images/logo.svg" >
</section>
<section id="content_2">
<div class="headline">
<h1>GEMS</h1>
</div>
<img class="gem-image" src="images/gem-textured.png" >
</section>
</div>
</main>
<script src="js/main.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
My Problem is: The Polygon is not alternating like the link below. And I need a hint how I can make a scroll event such in the link the fill out the svg. As I already mentioned, I want to make use of Row Low but that did not work, I also get in touch with the owner but he did not replied yet.

The image does not appear if I press the button using jquery

I'm developing a New Year greeting card and I would like to make an image appear from below after pressing the button that also starts the music.
How can I do it using jquery?
$(document).ready(function() {
$(".btn_music .fa-play-circle").on('click', function() {
$(this).hide();
$('.fa-pause-circle').fadeIn();
$('#myMusic')[0].play();
$("#container").fireworks({
sound: true, // sound effects
opacity: 0.55,
width: '90%',
height: '10%'
}).play();
$('#champagne').hide();
$('#champagne').slideToggle(1000);
});
$(".btn_music .fa-pause-circle").on('click', function() {
$(this).hide();
$('.fa-play-circle').fadeIn();
$('#myMusic')[0].pause();
});
});
body {
background: linear-gradient(#000, #01f);
font: 10.5em Arial;
}
html,
body {
height: 100%;
}
.stroke {
stroke: goldenrod;
stroke-width: 0.5px;
stroke-dasharray: 0 250;
stroke-opacity: 1;
fill: none;
animation: stroke_offset 8s infinite;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#keyframes stroke_offset {
25% {
stroke-dasharray: 0 250;
stroke-opacity: 1;
}
50% {
stroke-dasharray: 250 0;
stroke-opacity: 0.75;
}
55% {
stroke-dasharray: 250 0;
stroke-opacity: 0;
}
70% {
stroke-dasharray: 250 0;
stroke-opacity: 0;
}
75% {
stroke-dasharray: 250 0;
stroke-opacity: 0.75;
}
100% {
stroke-dasharray: 0 250;
stroke-opacity: 1;
}
}
.fill {
fill: gold;
fill-opacity: 0;
animation: fill_offset 8s infinite;
animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#keyframes fill_offset {
25% {
fill-opacity: 0;
}
35% {
fill-opacity: 0;
}
50% {
fill-opacity: 1;
}
70% {
fill-opacity: 1;
}
90% {
fill-opacity: 0;
}
100% {
fill-opacity: 0;
}
}
#fade-text {
font-family: 'Dancing Script', cursive;
font-size: 0.6em;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.music {
position: absolute;
top: 22%;
left: 0;
right: 0;
margin: 0 auto;
}
.btn_music {
background-color: transparent;
color: #fff;
font-size: 85px;
border: none;
display: block;
margin: 0 auto;
opacity: .1;
transition: all linear .2s;
cursor: pointer;
outline: none;
}
.btn_music:hover {
opacity: 1;
}
.fa-pause-circle {
display: none;
}
#champagne {
display: none;
width: 300px;
height: 250px;
margin: 22% 43% auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container"></div>
<div class="music">
<audio volume="1" id="myMusic" src="/public/music/Pepe-pepe-pepe-Disco-Samba-HQ.mp3" loop=""></audio>
<button class="btn_music">
<i class="far fa-play-circle"></i>
<i class="far fa-pause-circle"></i>
</button>
</div>
<svg version="1.1" viewBox="0 0 800 600">
<symbol id="fade-text">
<text x="50%" y="30%" text-anchor="middle">Happy New Year !</text>
<text x="48%" y="50%" text-anchor="middle">2021</text>
</symbol>
<g>
<use class="stroke" xlink:href="#fade-text"/>
<use class="fill" xlink:href="#fade-text"/>
</g>
</svg>
<br/>
<img src="public/img/cin_cin.gif" id="champagne">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="public/js/jquery.fireworks.js"></script>
<script src="/public/js/index.js"></script>
</body>
With jQuery, with the play button I would like to start the music, the fireworks and view the photo while with the pause button I would like to pause the music, the fireworks and make the photo disappear.
Is it possible to do it or not?

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>

Mouseenter item card

Please help with the code! I need to hover the mouse over the button with the cart, it added a class and svg class, and the button with favorites, also added a class.
And Vice versa-hovering the mouse over your favorites, the button with the cart is hidden
$('.item-block__button-cart').mouseenter
function() {
$(this).addClass('item-block__button-cart--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-favorite--deactive");
}
);
$('.item-block__button-cart').mouseleave
function() {
$(this).removeClass('item-block__button-cart--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-favorite--deactive");
}
);
$('.item-block__button-favorite').mouseenter
function() {
$(this).addClass('item-block__button-favorite--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-cart--deactive");
}
);
$('.item-block__button-favorite').mouseleave
function() {
$(this).removeClass('item-block__button-favorite--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-cart--deactive");
}
);
.item-block__buttons {
border-top: 1px solid hsla(0, 0%, 96%, .75);
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
opacity: 1;
-webkit-transition: opacity .2s;
transition: opacity .2s;
z-index: 2;
background: hsla(0, 0%, 100%, .75);
overflow: hidden
}
.item-block:hover .catalog__items-item-slider .carousel__arrow--detail,
.item-block:hover .item-block__buttons {
opacity: 1
}
.item-block__button {
width: 50%;
position: relative;
z-index: 2;
-webkit-transition: opacity .1s, -webkit-transform .2s;
transition: opacity .1s, -webkit-transform .2s;
transition: transform .2s, opacity .1s;
transition: transform .2s, opacity .1s, -webkit-transform .2s
}
.item-block__button-cart--deactive,
.item-block__button-favorite--deactive {
display: none
}
.item-block__button-cart--active,
.item-block__button-favorite--active {
width: 100%
}
.item-block__button-favorite {
border-right: 1px solid hsla(0, 0%, 96%, .7)
}
.item-block__button-favorite--active {
border: none
}
.item-block__button svg {
position: absolute;
top: 50%;
left: 75px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
fill: #4c4b5b;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s
}
.item-block__button i {
position: absolute;
top: 50%;
left: 15px;
line-height: 18px;
font-size: 14px;
color: #b6b8ba;
margin-top: -9px;
right: 15px;
text-align: center
}
.item-block__button-cart svg {
left: auto;
right: 80px
}
.item-block--big .item-block__button svg {
left: 175px
}
.item-block--big .item-block__button-cart svg {
left: auto;
right: 175px
}
.item-block__button-cart--added svg.active-svg {
right: 160px
}
.item-block__button-cart--active svg {
-webkit-transform: translate(-135px, -50%);
transform: translate(-135px, -50%)
}
.item-block--big .item-block__button-cart--active svg {
-webkit-transform: translate(-240px, -50%);
transform: translate(-240px, -50%)
}
.item-block__button-favorite--active svg {
-webkit-transform: translate(30px, -50%);
transform: translate(30px, -50%)
}
.item-block--big .item-block__button-favorite--active svg {
-webkit-transform: translate(130px, -50%);
transform: translate(130px, -50%)
}
.item-block__button a.addet-to-basket-link,
.item-block__button span {
color: #4c4b5b;
text-transform: uppercase;
font-size: 14px;
position: absolute;
top: 20px;
left: 115px;
white-space: nowrap;
letter-spacing: 1.05px;
-webkit-transition: opacity .1s, -webkit-transform .2s;
transition: opacity .1s, -webkit-transform .2s;
transition: transform .2s, opacity .1s;
transition: transform .2s, opacity .1s, -webkit-transform .2s;
opacity: 0
}
.item-block--big .item-block__button span {
left: 215px
}
.item-block__button-cart span {
left: auto;
right: -30px;
color: #ff2438
}
.item-block--big .item-block__button-cart span {
left: auto;
right: 65px
}
.item-block__button-cart--added span {
right: -80px
}
.item-block__button-cart--active span {
opacity: 1;
-webkit-transform: translateX(-135px);
transform: translateX(-135px)
}
.item-block--big .item-block__button-cart--active span {
opacity: 1;
-webkit-transform: translateX(-240px);
transform: translateX(-240px)
}
.item-block__button-favorite--added span {
left: 35px
}
.item-block__button-favorite--active.item-block__button-favorite--added svg {
left: 0
}
.item-block__button-favorite--active span {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px)
}
.item-block--big .item-block__button-favorite--active span {
opacity: 1;
-webkit-transform: translateX(130px);
transform: translateX(130px)
}
.item-block__button-favorite svg {
width: 22px;
fill: #4c4b5b;
height: 18px
}
.item-block__button-cart svg {
width: 35px;
height: 35px;
fill: #ff2438
}
<span class="item-block__buttons">
<span class="js-add-to-favorite item-block__button item-block__button-favorite" data-toggle="tooltip" data-placement="top" onclick="return $.addFavorite('/shop/favorite/', {#id}, this)">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>В избранное</span>
</span>
<span class="js-add-to-basket js-add-to-basket-list item-block__button item-block__button-cart" data-toggle="modal" data-target="#added2basket" data-placement="top" onclick="return $.bootstrapAddIntoCart('/shop/cart/', {#id}, 1)">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="20.5" r="1"/><circle cx="18" cy="20.5" r="1"/><path d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1"/></svg>
<span>В корзину</span>
</span>
</span>

This code work!
$(document).ready(function() {
$('.item-block__button-cart').mouseenter(function() {
$(this).addClass('item-block__button-cart--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-favorite--deactive");
});
$('.item-block__button-cart').mouseleave(function() {
$(this).removeClass('item-block__button-cart--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-favorite--deactive");
});
$('.item-block__button-favorite').mouseenter(function() {
$(this).addClass('item-block__button-favorite--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-cart--deactive");
});
$('.item-block__button-favorite').mouseleave(function() {
$(this).removeClass('item-block__button-favorite--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-cart--deactive");
});
});

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

Categories

Resources