Create an animated splash web page with zero JS coding

There is an immense information on the web about html, css and web animations in general. It's hard for techies like me to stay up to date with new trends and emerging technologies. In this article I'll try to shed some light on the emerging frontend library "Pompous Player" that allows us to build professionally-looking animated presentations, without having to write a single line of JavaScript code.

What is Pompous Player?

It's a Javascript-based animation player on GitHub that works similar to GreenSock, however it is html-based. You write your presentation using html&css, and the player "plays" it.
It works by introducing a few new custom html attributes and CSS styles that only the player understands; once you start using those styles, you'll be gong "wow, I finally understand what this css class does", trust me.

There are a lot of challenges when it comes to building professionally-looking presentations. Read about them here. It's worth saying that being able to play/pause/resume your "play" at any time is the biggest challenges of all, and it is solved really well in Pompous Player. It can play/pause/resume not just CSS animations, but also html5 video-s and audio-s on your web page. With the provided "video-like" progress/navigation bar, you can build presentations that look like a video, play like a video, but are in fact plain CSS animations.

What will we build?

We'll build a splash page that animates some texts and one image. The animations will be setup to start at page load.

Main concepts:

• The whole animated html content is in a <div> (or span, etc) element that we call "the stage".

<div data-pompous-player-stage>
  <!-- The animated html content goes in here -->
  <!-- The play/navigation buttons (aka "the skin" also go in here -->
</div>

Above, the "data-pompous-player-stage" attribute tells the player that this is the "stage" element.

• You design your presentation as if you'll be recording a video: you choose the stage display ratio (width by height); The most popular choice is 1920x1080 (aka 1080p); it fits best on most screens out there. The player uses "responsive" design, meaning it will scale automatically to fit the available screen width+height; you can also choose to make it fit just the available width (with a vertical scrollbar that shows when needed).

<div data-pompous-player-stage data-design-width="1920" data-design-height="1080">
  <!-- .... -->
</div>

Above, we tell the stage to have a 1920x1080 ratio.
There are more configuration attributes, see them here.

• The player applies specific classes at specific times; all times are counted from the presentation start time. Example:

<div class="text-exclamation" 
  data-classes="show rotateInLeft delay-3.5s, scale-exclamation delay-5s">
!
</div>

Above, the "text-exclamation" class will be applied at page load (as usual). Then the player will apply both the "show" and "rotateInLeft" classes at 3.5 seconds after the presentation start, and later it will apply the "scale-exclamation" class at 5 seconds. Note the "," which separates these groups of classes. The "delay-3.5s" class does not really exist. It's a special syntax to tell the player when to apply the classes. You can also use milliseconds, e.g. "delay-3500ms".

• Some classes may contain only non-animated styles (e.g. visibility:visible;, whereas others may contain also animated styles; you can spot those by looking for the "transition-property" style ,e.g. transition-property: opacity;.

.show
{
  visibility: visible;
}

.bounceInRight
{
  transition-property: transform;
  --pp-transform-from: translateX(1000px);
  transform: translateX(0px);
  --pp-transition-timing-function: easeOutBack;
  transition-duration: 1.5s;
}

The "bounceInRight" class will do the following: When applied to a <div>, it will immediately translate the <div> 1000 pixels to the right; Then it will move the <div> to 0 pixels (to it's previously-set position) for a duration of 1.5 seconds. The easing will be "easeOutBack" which is a special easing function that gives it a "bounce" effect at the end. Note that we can't use transition-timing-function: easeOutBack, because the browse doe not understand the value "easeOutBack" and ignores it. However, this is perfectly OK to use: transition-timing-function: ease-out.

The --pp-transform-from: translateX(1000px); is a custom CSS style that the browser ignores, but it is vital to the player: It tells the player the initial value for the thing being transitioned/animated. This CSS style MUST be present in animated CSS classes (classes that have the transition-property: ... style).

Now let's look at a more sophisticated example, where we animate two things at once: blur and opacity:

.blur {  
  --pp-filter-from: blur(0px);
  filter: blur(12px);

  --pp-opacity-from: 1;
  opacity: 0;

  transition-property: filter, opacity;
  transition-timing-function: ease-out;
  transition-duration: 2s;
}

And finally, even more complex example where we define intermediate steps, similar to the way you would do with standard CSS @keyframes:

.bounceOutRight
{
  transition-property: transform, opacity;

  --pp-opacity-from: 1;
  --pp-opacity-20: 1;
  --pp-opacity-timing-function: linear;
  opacity: 0;

  --pp-transform-from: translateX(0px);
  --pp-transform-20:   translateX(-20px);  
  transform:           translateX(2000px);
  --pp-transform-timing-function: ease;

  --pp-transition-precision: 3;
  transition-duration: 1.2s;
  --pp-delay: 2.5s;
}

The --pp-transform-20: translateX(-20px); style means: From 0 to 20% of the total animation duration time (which is 1.2 seconds), animate the "transform" from "translateX(0px)" to "translateX(-20px)".
It also demonstrates another (optional) way of specifying the animation delay, using the --pp-delay: 2.5s; custom CSS style.

Step 1: Create a slideshow with just one one animated text

Click "Rerun" in the lower-right of the codepen above. The text should fly into the page.

How does it work? Look at the html. The CSS class "text-stay" is applied to the text at page load, which nicely styles and positions the text on the screen, but it's hidden at this time (via visibility: hidden;).

The presentation is setup to auto-start at page load (via html attribute data-auto-start="true"). Once it starts, the player applies the CSS classes "show bounceInRight delay-0s". at time zero. The first class shows the text immediately. The second class immediately shifts it 1000px to the right, and then slides it in for 1.5 seconds. The "delay-0s" class is "fake" (does not exist); it's something that the player understands and interprets.

Step 2: Add more animated texts and an image

Why some texts appear on top of (overlap over) others, and not vice versa? This is because the natural z-index ordering of the text div elements: the div elements further down in the html will overlap the ones above them.

Final step 3: Add a "skin" (play/pause/resume button and full-screen button)

See the two new buttons in the upper right corner above. We like to refer to them as "the skin". Try to pause and resume the presentation while playing. Cool. This is something that plain CSS animations can't do.

See the data-skin="carousel" in the html above. The play/pause/resume buttons get show/hidden at the right time because of the predefined "carousel" notification listener being used. Now change it to data-skin="none" : the play/pause/resume button still works, but we see only a "play" button, because that feedback from the player to the "skin" is missing.

Final thoughts

Some colleagues may question why do we have to use custom CSS attributes (e.g. --pp-transform-from: translateX(0px);) to build CSS animations, and hence be inherently resistant to learn and use this new framework. Here is more context on that topic. It's worth saying that we enjoy this much-more-verbose way of writing CSS animations, because the whole animation can be defined in one CSS class; this way, the CSS code is much more readable and maintainable.

The no-javascript-coding approach in Pompous Player brings a new powerful tool in the hands of web designers and web site creators. It's perfect for creating splash screens, ads, storytelling, and other eye-catching visual arts.

We will not delve here into the topic of best practices for best user experience. It's sufficient to say that we overdid it a bit with the amount of "action" happening on the page. A normal presentation will go easy on these animation effects.

Pompous Player is the backbone of our online presentation builder at PompousPhotos.com, but it can be used standalone, on any web page, or in a iFrame, for easier embedding.

You can also see this demo on GitHub: Coronavirus.html : and, play it here. Make sure to checkout the other demos, too.

My name is Torrance, and I am the creator of Pompous Player. Let me know your thoughts.

I bid you to stay safe,
- Torrance