How to repeat SVG animation after reload using Javascript

Question

I need your help

i created a pre-loading screen for a website, and the logo SVG animation is going well, but the only part I m confused with is that: Every time I reload, the animation doesn’t happen, yet the the 3 seconds of the loader is functional.

Here is the website: http://itsrev.io

here is the code:

var loaderScreen;

  function showPage() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("banner").style.display = "block";
  }

  function loadingFunction() {
    loaderScreen = setTimeout(showPage, 4000);
  }

CSS:

 /**************************************
    Preloader
    ***************************************/
    #loader {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #banner {
      display: none;
    }

    /* Add animation to "page content" */
    #banner {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
    }

    @-webkit-keyframes animatebottom {
      from { bottom:-100px; opacity:0 }
      to { bottom:0px; opacity:1 }
    }

    @keyframes animatebottom {
      from{ bottom:-100px; opacity:0 }
      to{ bottom:0; opacity:1 }
    }

Answer 1

The image is being cached. Once the animation has finished, it remains cached in that state.

Possible solutions:

1. Consider inlining the SVG in your HTML, or

2. Force the browser to reload the SVG each time. you can do this by having the server set cache control headers for the SVG file. Or you can use javascript on the page to change the URL of the image each time.

For example, something like the following:

<div id="loader">
  <img width="400"/>
</div>


function loadingFunction() {
  var url = "imgs/logo_svg_animated.svg?r=" + Math.random();
  document.querySelector("#loader img").setAttribute("src", url);
  loaderScreen = setTimeout(showPage, 4000);
}

The browser things that logo?r=12345 is a different file to logo?r=98765.

Answer 2

This is not an answer. Take it as a long comment.

In your code you have many animations looking like this:

@keyframes whatever {
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}

Please note that after 100% comes 0%. Also: the code is extremely verbose with one animation like this per polygon.

There is another kind of animation in your code looking like this:

@keyframes whatever2 {
  0% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(-75px, 0px);
  }
  62.50% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(-75px, 0px);
  }
  75% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(0px, 0px);
  }
  100% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(0px, 0px);
  }
}

I think you created the CSS code dynamically and your script is not working properly.

Maybe you should need to take a look at the script you have.maybe you should test it first with only one polygon.