linking multiple svg css animations using java script

user_18556810 0
Viewed 47

Hi all so my question is i am attempting to link multiple svg animations i downloaded from SVGartista.com, forewarning i am not a java script or web development expert, but i have no clue how to, everything ive looked up doesnt work when i try it with js. here is my current code i havent included the html for the svg because it is obnoxious. and i only included one example of the css for svg because its too long. But if anyone has an idea on how to loop multiple of these animations then ill take any ideas. the css is for both it fading in piece by piece and fading out, the end goal is to have it fade in, stay for 3 secs and then fade out, then the next image repeats the same process, and so on until it loops over. Thank you(again sorry im new to stackoverflow)

svg .svg-elem-1 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  }
  
  svg.active .svg-elem-1 {
    fill: rgb(108, 99, 255);
  }
  
  svg .svg-elem-2 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  }
  
  svg.active .svg-elem-2 {
    fill: rgb(230, 230, 230);
  }
  
  svg .svg-elem-3 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  }
  
  svg.active .svg-elem-3 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-4 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  }
  
  svg.active .svg-elem-4 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-5 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  }
  
  svg.active .svg-elem-5 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-6 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  }
  
  svg.active .svg-elem-6 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-7 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  }
  
  svg.active .svg-elem-7 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-8 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  }
  
  svg.active .svg-elem-8 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-9 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
  }
  
  svg.active .svg-elem-9 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-10 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
  }
  
  svg.active .svg-elem-10 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-11 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
  }
  
  svg.active .svg-elem-11 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-12 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
  }
  
  svg.active .svg-elem-12 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-13 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  }
  
  svg.active .svg-elem-13 {
    fill: rgb(230, 230, 230);
  }
  
  svg .svg-elem-14 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
  }
  
  svg.active .svg-elem-14 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-15 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
  }
  
  svg.active .svg-elem-15 {
    fill: rgb(230, 230, 230);
  }
  
  svg .svg-elem-16 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
  }
  
  svg.active .svg-elem-16 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-17 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
  }
  
  svg.active .svg-elem-17 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-18 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
  }
  
  svg.active .svg-elem-18 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-19 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
  }
  
  svg.active .svg-elem-19 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-20 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
  }
  
  svg.active .svg-elem-20 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-21 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s;
  }
  
  svg.active .svg-elem-21 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-22 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
  }
  
  svg.active .svg-elem-22 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-23 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
  }
  
  svg.active .svg-elem-23 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-24 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1000000000000005s;
  }
  
  svg.active .svg-elem-24 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-25 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
  }
  
  svg.active .svg-elem-25 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-26 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3s;
  }
  
  svg.active .svg-elem-26 {
    fill: rgb(63, 61, 86);
  }
  
  svg .svg-elem-27 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
  }
  
  svg.active .svg-elem-27 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-28 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
  }
  
  svg.active .svg-elem-28 {
    fill: rgb(255, 255, 255);
  }
  
  svg .svg-elem-29 {
    fill: transparent;
    -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
            transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6000000000000005s;
  }
  
  svg.active .svg-elem-29 {
    fill: rgb(255, 255, 255);
  }

var wrapper = document.getElementById("eUZ3dEPR9vg1")

wrapper.classList.add('active')
svg css html javascript
1 Answers

Do you have multiple svgs? or one svg and it has multiple elements inside? assuming the are multiple svg elments and you want to add the "active" class to the first one, wait the fade-in amimation, remove, wait for fade-out animation and then add the active class and animation to your next svg, then you have atleast two options:

1- easy but not 100% accurate: based on your css we assume the animations take 3.6 + 0.7 seconds.

const ids = ["eUZ3d...", "foobar123", ...]
for (let i = 0; i < ids.length; i++){
    const el = document.getElementById(ids[i]);
    setTimeout(() => el.classList.add("active"), 4300 * 2 * i); // start fade-in
    setTimeout(() => el.classList.remove("active"), 4300 * (2 * i +1)); // start fade-out
}

in case you have a low end device were the animations are slower / with jank, then you will be starting the n+1 th animation before the nth one is really ended.

2- you can wait for the transitionendevent. To make sure when your animation is really finished for each of them. (you can use this promise wrapper https://github.com/kluntje/kluntje/blob/develop/packages/js-utils/src/dom-helpers/lib/waitForTransitionEnd.ts for a more readable code):

async function func () {
    const ids = ["eUZ3d...", "foobar123", ...]
    for (let i = 0; i < ids.length; i++){
        const el = document.getElementById(ids[i]);
        el.classList.add("active")// start fade-in
        await waitForTransitionEnd(el.querySelector(".svg-elem-29")); // svg part with the last tranisition according to the css
        el.classList.remove("active")// start fade-out
        await waitForTransitionEnd(el.querySelector(".svg-elem-29"));
    }
}

func();
user_25208180
Related