Attempting to animate multiple instances of a cross mark animation can be tricky. The animation works well with one instance, but struggles when trying to create more than one. The challenge lies in controlling the size and position of each cross animation. What am I missing?
Here is my approach: (Let's say I want to animate the second cross - triggerB)
$("button").click(function(){
$(".triggerB").toggleClass("drawn")
});.container {
width: 50%;
max-width: 250px;
margin: 0 auto;
}
.cross1{
stroke-dasharray: 50;
stroke-dashoffset: 50;
-webkit-transition: stroke-dashoffset 1s 0.8s ease-out;
-moz-transition: stroke-dashoffset 1s 0.8s ease-out;
-ms-transition: stroke-dashoffset 1s 0.8s ease-out;
-o-transition: stroke-dashoffset 1s 0.8s ease-out;
transition: stroke-dashoffset 1s 0.8s ease-out;
}
.cross2{
stroke-dasharray: 50;
stroke-dashoffset: 50;
-webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
-moz-transition: stroke-dashoffset 1s 0.5s ease-out;
-ms-transition: stroke-dashoffset 1s 0.5s ease-out;
-o-transition: stroke-dashoffset 1s 0.5s ease-out;
transition: stroke-dashoffset 1s 0.5s ease-out;
}
.drawn + svg .path{
opacity: 1;
stroke-dashoffset: 0;
}
.triggerA {
left:100px;
}
.triggerB {
left:400px;
}
.triggerC {
left:700px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="triggerA"></div>
<div class="triggerB"></div>
<div class="triggerC"></div>
<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 37 37" style="enable-background:new 0 0 37 37;" xml:space="preserve">
<polyline class="cross1 path" style="fill:none;stroke:#fc1c03;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
12.5,24.5 24.5,12.5 "/>
<polyline class="cross2 path" style="fill:none;stroke:#fc0303;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;" points="
12.5,12.5 24.5,24.5 "/>
</svg>
</div>
<button>go/reset</button>I intend to implement the following:
$("button").click(function(){
$(".triggerA").toggleClass("drawn")
$(".triggerB").toggleClass("drawn")
$(".triggerC").toggleClass("drawn")
});