The second class immediately shifts it 1000px to the right, and then slides it in for 1.5 seconds. The first class shows the text immediately. Once it starts, the player applies the CSS classes 'show bounceInRight delay-0s'. The presentation is setup to auto-start at page load (via html attribute data-auto-start='true'). 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 ). Step 1: Create a slideshow with just one one animated textĬlick 'Rerun' in the lower-right of the codepen above. It also demonstrates another (optional) way of specifying the animation delay, using the -pp-delay: 2.5s custom CSS style.

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)'. Now let's look at a more sophisticated example, where we animate two things at once: blur and opacity: This CSS style MUST be present in animated CSS classes (classes that have the transition-property. 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. However, this is perfectly OK to use: transition-timing-function: ease-out. Note that we can't use transition-timing-function: easeOutBack, because the browse doe not understand the value 'easeOutBack' and ignores it. The easing will be 'easeOutBack' which is a special easing function that gives it a 'bounce' effect at the end. The 'bounceInRight' class will do the following: When applied to a, it will immediately translate the 1000 pixels to the right Then it will move the to 0 pixels (to it's previously-set position) for a duration of 1.5 seconds. pp-transition-timing-function: easeOutBack The whole animated html content is in a (or span, etc) element that we call 'the stage'.

The animations will be setup to start at page load. We'll build a splash page that animates some texts and one image. 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. It can play/pause/resume not just CSS animations, but also html5 video-s and audio-s on your web page. 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. There are a lot of challenges when it comes to building professionally-looking presentations.

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. You write your presentation using html&css, and the player 'plays' it. It's a Javascript-based animation player on GitHub that works similar to GreenSock, however it is html-based. 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. It's hard for techies like me to stay up to date with new trends and emerging technologies. There is an immense information on the web about html, css and web animations in general.

Game home screen animation