Recreating the Pokémon Fire Red & Leaf Green Items Screen with CSS Scroll Timeline Animations

Pokemon Fire Red item screen demo I created to explain scroll timelines in CSS

I recently found myself working with CSS scroll timelines at work and needing to use a named scroll timeline shared across two different parts of the UI to control the visibility of an overlay based on the scrolling elements scroll progress.

As the codebase I work on is private I decided to build a small example project to illustrate what I learned doing the work. When thinking about how best to do this one experience from my youth sprung to mind — Pokémon Fire Red and that game’s item screen.

If you’re not familiar with the game, it was a remake of the original Pokémon Red and Green built on the game engine for Pokémon Ruby and Sapphire and as a “Gen-Wunner” who loves 16-bit graphics it was one of my favourites.

The item screen in particular was an amazing bit of UX, as you scrolled through the various items in your bag the sprite of the bag would be updated to show the appropriate pockets being opened as you went through items, Pokéballs and key items respectively. It was a nice little extra touch that none of the games before (or I think even after) had.

So I decided to recreate the cool bag pocket animation using nothing but HTML and good ol’ CSS, with a caveat — the underlying CSS properties used are only fully supported by Chromium based browsers right now.

First things first — The demo

You can find the demo and source code available on my Github — https://github.com/colinfwren/firered-item-scroll . This demo is a version of the UI from the Gameboy Game scaled up 4x so it’s not responsive, the ‘screen’ width is 960px so as long as you have that amount of space you should be able to view it OK.

If you’re unable to access the demo with a Chromium browser or can’t be bothered to check it out, here’s a GIF that shows it off.

Pokemon Fire Red Item Screen changing bag sprite as item list is scrolled

How it works

The HTML structure is pretty straightforward, just placeholders for the bag section title and bag sprite and then a list of the items in the bag.

Structure for the item screen

Under the hood I’m using the scroll-timeline CSS properties to capture the scroll progress of the item list. This provides a scroll progress value that can then be used to drive a keyframe animation based on the percentage of scrolling that has taken place, or when combined with animation-range capped to a measured amount.

Using scroll-timeline to drive an animation based on scroll progress

However this code doesn’t work! This is because of the way that `scroll-timeline` works with scoping.

As the bag sprite isn’t a descendent of the item list it can’t be changed by scroll-timelines default scoping behaviour

By default scroll-timeline will only make the scroll progress available to a direct descendent, which is not how the structure of the item screen is laid out. For the bag sprite to be updated when the item list is scrolled that scroll progress value needs to be made available for use within a shared parent element. This is achieved using timeline-scope.

Using timeline-scope the scroll-progress of one element can be accessed by another element via a shared parent element

Now we have the scroll controlling the different bag images! But it looks a bit gross, with the images overlaying each other.

By default the animation uses tweening to try and make the transitions between the different states seamless but it looks janky

This is due to the way the browser tries to tween (a term using in animation to describe drawing the between frames of a keyframed animation) between the different states. We can clean this up by tightening up the boundaries of when the images should switch over.

Setting the same image to be used across the boundaries of the animation we can remove the tweening

Now that’s looking a little less grim!

By adding the extra steps theres less tweening

I hope this has given you a little introduction into CSS scroll timelines. It was a fun little project to build and I look forward to more browsers supporting this nifty little feature of CSS soon.