Comeback of the Marquee
Marquees were heavily used in the early days of the internet. Unfortunately they have been deprecated and removed as of HTML5. But now that animated GIFs have made a comeback, we will help the marquee doing the same!
What’s a news site without a news ticker? Not much! That’s why our product manager recently came up with the idea to build a fancy breaking news marquee component. Yes, you have read correctly, he wanted to reintroduce the marquee in 2018. As a developer there was only one reasonable answer to his feature request: Challenge accepted!
In case you don’t know what a marquee is, here is a short description:
A marquee is generally some content that floats from one side of the screen to the other. But as everybody knows a picture is worth a thousand words, so here is a screen made by our UI/UX colleagues:
Doesn’t sound very complicated, right? Ok, here are the specs:
- Dynamic content based on the current breaking news.
- The user should not perceive any performance impacts.
- Revolver mode, which means that the marquee has to loop endlessly.
- Full responsive: must work on all devices, no matter how big their screen is.
- Reusable, so the component can be used for other features, too.
Now the whole task became a little bit more sophisticated than initially assumed. But hey, we were able to use any framework or library that does the job best. No questions asked — we had to choose Preact. Preact claims to be a fast and lightweight alternative to React that is well suited to high-performance apps.
Well, I don‘t want to keep you in suspense any longer, so here is how we implemented the marquee.
Implementation
First you should get a clear understanding of the logic behind our implementation. Let’s say we have one breaking news item consisting of a headline that is linked to the corresponding article. The item itself is e.g.150 pixels wide and the container has a width of 400 pixels. After the initial rendering we would have the following scenario:
As you can see there is a lot of empty space left, right next to the item. That’s why we have to create a few copies, which enables us to fill the gap and to loop the items endlessly.
Next up, we need to create the actual marquee animation that moves every element smoothly to the left. An often used performance trick for running animations as smoothly as possible is taking advantage of the GPU. In CSS3 there are a few properties that forces the browser to swap to GPU mode. Because of the fact that we only have to move some elements along the x-axis we make use of the translateX-property. By using the infinite keyword the animation can be repeated endlessly.
Suppose the animation duration is set to five seconds then all elements would be rendered like this after one round:
That’s it! Now we only have to repeat the previously described animation and every marquee item starts from position zero again.
Due to the fact that our content is based on the current news which is changing frequently the translateX-value for the animation can’t be hard coded, as we only know it on runtime. Fortunately, there is a way to use variables within the style sheet to store the width of our content. CSS Custom Properties to the rescue:
Performance
A huge benefit of this approach is that we only have to compute the content width once the marquee is rendered, store it in a variable and use it for our animation. And since we are only animating a transform property everything can be done in the GPU, meaning better performance, especially on mobile devices.
In one of the first versions of the marquee we followed a different strategy where we computed the position of each item and stored it inside the item’s style attribute. But with every style change the browser has to recalculate the layout of all affected elements and must repaint this area of the document. Performance-wise, this method is not ideal as it utilizes the CPU heavily which results in a slower animation and a rapid battery drainage on mobile devices.
Another powerful tool for increasing animation performance is the will-change property. It allows us to give the browser a hint that we will change the transform value of our content, so the browser can setup appropriate optimizations ahead of time before the items are actually changed.
As we all know, users are happy when animations run as smoothly as possible. To ensure the best possible performance we should strive for 60 frames per second (FPS). So let’s have a look at how the marquee performs:
60 FPS and no CPU usage — what more could we ask for?
Reusability
To make the component reusable we are just using a special property called children (props.children), which represents the direct descendants of an element.
Whatever we pass between the component’s tags can be accessed via this.props.children. Let‘s take a look at how we utilize this feature to render our content.
That’s it! Now you have all the information you need to write your very own marquee component or you can just use ours: https://github.com/spring-media/preact-marquee
© Axel Springer SE. Alle Rechte vorbehalten.
Originally published at www.welt.de on September 18, 2018.
