I have an animated SVG whose animation I would like to show when it is being revealed. In other words I need the SVG animation to start only when the user scrolls down to it! But it starts after the page has loaded and finishes immediately before even the user can see it.
Here is my SVG code:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="58px" height="58px" viewBox="0 0 58 58" enable-background="new 0 0 58 58" xml:space="preserve" style="height: 85px; width: 85px;">
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M10.946,23.818
c0.638-0.516,1.297-1.05,1.929-1.592c0.491-0.419,0.92-0.536,1.503-0.411c0.807,0.175,1.642,0.303,2.526,0.441
c0.325,0.05,0.663,0.103,1.013,0.159c-0.221-0.269-0.436-0.524-0.644-0.773c-0.591-0.708-1.151-1.378-1.651-2.07
c-0.248-0.343-0.387-0.891-0.34-1.332c0.092-0.853,0.246-1.713,0.394-2.543c0.05-0.276,0.099-0.551,0.146-0.826
c-0.673,0.422-1.284,0.895-1.875,1.354c-0.307,0.238-0.625,0.484-0.941,0.717c-0.334,0.243-0.851,0.386-1.257,0.34
c-0.869-0.097-1.749-0.252-2.679-0.416c-0.323-0.057-0.651-0.115-0.996-0.173c0.211,0.261,0.41,0.511,0.604,0.753
c0.505,0.634,0.983,1.231,1.492,1.779c0.554,0.599,0.708,1.225,0.512,2.093c-0.16,0.714-0.281,1.451-0.396,2.163
c-0.048,0.297-0.098,0.595-0.147,0.89l0.062,0.054C10.449,24.222,10.697,24.02,10.946,23.818z" class="lJbcJjBX_0"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M25.466,17.765
c0.861-0.696,1.75-1.417,2.603-2.148c0.662-0.566,1.242-0.723,2.028-0.554c1.089,0.236,2.216,0.409,3.409,0.595
c0.438,0.067,0.894,0.138,1.367,0.215c-0.299-0.362-0.589-0.708-0.869-1.043c-0.797-0.956-1.553-1.859-2.229-2.793
c-0.334-0.462-0.521-1.202-0.458-1.797c0.124-1.151,0.331-2.311,0.532-3.432c0.067-0.372,0.133-0.744,0.197-1.115
c-0.908,0.57-1.732,1.208-2.53,1.826c-0.414,0.322-0.844,0.653-1.27,0.967c-0.452,0.328-1.148,0.521-1.696,0.458
c-1.173-0.131-2.36-0.341-3.615-0.562c-0.436-0.076-0.879-0.155-1.343-0.234c0.285,0.352,0.553,0.689,0.815,1.017
c0.681,0.855,1.326,1.662,2.013,2.401c0.747,0.808,0.955,1.652,0.69,2.824c-0.216,0.963-0.379,1.958-0.535,2.918
c-0.065,0.401-0.133,0.803-0.199,1.201l0.083,0.073C24.796,18.31,25.13,18.037,25.466,17.765z" class="lJbcJjBX_1"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M17.941,30.16
c-0.344-0.54-0.7-1.055-1.112-1.651c-0.15-0.214-0.302-0.436-0.462-0.668c-0.034,0.286-0.07,0.557-0.102,0.818
c-0.092,0.707-0.17,1.317-0.207,1.938c-0.039,0.644-0.298,1.08-0.837,1.418c-0.543,0.338-1.076,0.712-1.592,1.075
c-0.211,0.149-0.421,0.296-0.632,0.442l0.016,0.087c0.232,0.025,0.463,0.052,0.695,0.079c0.554,0.066,1.127,0.137,1.692,0.174
c0.872,0.058,1.433,0.392,1.817,1.087c0.28,0.503,0.625,0.986,0.992,1.5c0.142,0.196,0.286,0.399,0.436,0.614
c0.034-0.283,0.066-0.553,0.098-0.813c0.087-0.712,0.163-1.326,0.209-1.955c0.048-0.646,0.311-1.082,0.847-1.411
c0.552-0.335,1.091-0.712,1.613-1.076c0.186-0.129,0.37-0.257,0.556-0.386c-0.951-0.25-1.833-0.395-2.693-0.441
C18.69,30.959,18.292,30.71,17.941,30.16z" class="lJbcJjBX_2"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M43.172,46.744L24.923,20.908L21.061,23.682L39.526,49.438Z" class="lJbcJjBX_3"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M26.924,31.861" class="lJbcJjBX_4"></path>
<path fill="none" stroke="#E31E26" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M30.689,29.076L26.924,31.861" class="lJbcJjBX_5"></path>
<style data-made-with="vivus-instant">
.lJbcJjBX_0 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 35 37;
stroke-dashoffset: 36;
}
.lJbcJjBX_1 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 47 49;
stroke-dashoffset: 48;
}
.lJbcJjBX_2 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 29 31;
stroke-dashoffset: 30;
}
.lJbcJjBX_3 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 73 75;
stroke-dashoffset: 74;
}
.lJbcJjBX_4 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 0 2;
stroke-dashoffset: 1;
}
.lJbcJjBX_5 {
animation: lJbcJjBX_draw 900ms ease-in-out 0ms forwards;
stroke-dasharray: 5 7;
stroke-dashoffset: 6;
}
@keyframes lJbcJjBX_draw {
100% {
stroke-dashoffset: 0;
}
}
@keyframes lJbcJjBX_fade {
0% {
stroke-opacity: 1;
}
92.15686274509804% {
stroke-opacity: 1;
}
100% {
stroke-opacity: 0;
}
}
</style>
</svg>What is the best way to make this happen?
Thanks for helping!
