SVG & javascript animation for splash screen?


#1

Hello,

I see that splashscreen for ionic is just one image file…
But is this the only way to make splash screen for Ionic?

For instance, can I use an HTML page with animated SVG using javascript for splash screen?
or any custom made javascript percentage counter?

I’m trying to be more creative so please help.

Thanks,


#2

The answer is…kinda.

There’s no way to not show a static splash screen. That’s just the way the cookie crumbles.

You can show whatever you want once the static splash screen is hidden, though.

See Morony’s tutorial for an example here.


#3

Yeah, that’s not good.
Some game apps for instance have percentage bar with number counter… or animated splash screen.
I would certainly prefer to use them over a static image file.


#4

modals are appears after page load, splash screen should be loaded before app main page loaded.


#5

Yes, that’s a big problem which prevents us from being creative.
I requested html5 & css3 splash screen feature for ionic 4. Ionic team said they might work on it while creating their own native layer. it looks like they’re moving away from Cordova native layer and creating their own. They might be able to tweak start up process and let us use an html5 page as a splash screen.
Hopefully they will make it happen soon.
Cordova splash screen is outdated and full of bugs.


#6

SVG Animated files are very small and very well and suitable for mobile apps. but unfortunately developer should use PNG which is boring not only for developers mostly for end users.


#7

Exactly.

HTML5 file and svg & CSS3 combined are still smaller than the size of several PNG image files for all different screen sizes…
I don’t see any point of using a static image file as a splash screen in 2018. It feels so old school to do that.

HTML5 & CSS3 are responsive. You don’t need several files… you need to make it only once to use it for all screen sizes. and it comes with a plenty of animation features.

Buggy and slow cordova splash screen should be removed from Ionic.


#8

I love everything about this post. @jamesharvey it wasn’t that long ago you were asking noob questions, and now you’re providing answers at this level. It’s wonderful.