Animation of splash removal on web.

[eggp]

Hello,

When using the plugin on the web, it is very annoying that the splash screen suddenly jumps to the application screen.

I think it could do with a minimal animation ;)

My example code:

index.html:

<script id="splash-screen-script">
  function removeSplashFromWeb() {
    const splashElement = document.getElementById("splash");
    splashElement.classList.add("done");
    setTimeout(function () {
      splashElement.remove();
      document.getElementById("splash-screen-script")?.remove();
      document.body.style.background = "transparent";
    }, /*css animation time + 500ms*/2000);
  }
</script>
...
<style>
...
#splash {
  ...
  opacity: 1;
  transition: opacity 1.5s;
}

#splash.done {
    pointer-events: none;
    opacity: 0;
}
</style>

[jonbhanson]

@eggp thanks for the suggestion. Were you able to get this to work? I was not able to. I think it is because the Flutter view is painted over the top of the splash screen, so fading out the splash element is not seen. Maybe instead you could grab the Flutter view element and fade it in. My JS DOM manipulation is a lot rustier than my Dart. Can you try this technique and see if it works?

[eggp]

@jonbhanson

Yes, it works for me, It probably didn't seem to work for you because this change also needs to be made: #607

Should I make an example application in which I also include this?

[jonbhanson]

Yes, that would be very helpful!

[eggp]

Hello @jonbhanson,

Sorry, but I'm very busy :(

I prepared the repository as you requested. https://github.com/eggp/flutter_native_splash_web_animate_overlay_out

Change list (see this commit => eggp/flutter_native_splash_web_animate_overlay_out@b280858):

1. Don't bother with the body element, since flutter also handles it and this is a problem, let's make a stretched canvas (div#splash) instead.
2. Style can be placed under the div, so you won't have to deal with removal separately.
3. For the animation, it is necessary to set the transition css property on the div#splash element. Plus, you also need a helper class that starts the animation (#splash.remove)
4. Add the remove class in JS and clean up after the animation with a timer