A proof of concept from a project where I wanted to learn more about CSS keyframe animations, transformations and transitions, and how these could be triggered through JavaScript. The intention is to draw the user’s attention with a big, tone-setting image, and a short summary inviting them to explore further. For the purpose of this PoC, placeholders have been used for both the text and images. Before getting started on coding in HTML, CSS, and JavaScript, I designed the visuals and animations inside the prototyping software Adobe XD.

Clicking the next button results in the dimensions of both the image element and text element transforming, assuming different sizes and moving to occupy a different spot on the screen. The user is then met with a list of items, each with a short description. The items are meant to display the features of the game project as selling points. As they hover over each item (or feature), the intention is for the large image to visualize the description. This can be done through either a video or static image.

The code relies primarily on JavaScript timing events, such as setTimeout, which brings several challenges along with it. One of these challenges was how to prevent a timing event from firing after a different course of action had been chosen. The solution was to clear each timing event across an array. In the next proof of concept I discovered a more elegant solution: the animationend event.

Within the second proof of concept, the goal was to create an animated and interactive image slider, where its purpose is to inform the user through a series of slides of what they can expect from the in-game world of a game project. This proof of concept went through the same preparation phase, where I designed the animations and visuals in Adobe XD before I began work on the code itself.

Placeholders have been used here for both the text and images again. Each slide contains a picture of a location, as well as a summary of the location’s primary themes and elements are. The idea is that the picture sets the mood and the words within the summary further build upon it.

As the user rotates to the next slide, the title and summary within the box change accordingly. For example, the user clicks the right arrow, an animation starts playing and all the images are shifted one place forward. This is done through the animationend event, which reduces the heavy reliance on timing events, as well as adding and removing classes which contain CSS keyframes through JavaScript.