Formula 1 Max Verstappen career animated infographic

Hi, after dabbling with some very short animations I decided to turn a static infographic I made about Formula 1 season 2023 into an animated one and cover every season Max Verstappen participated in F1 since 2015. After researching all the data I decided I wanted to make it into a very flexible project targeting both video and webbrowsers. Because I couldn’t decide on size I decided to create it using resolution independent graphics as much as possible. In the end all elements except the car pictures were created in Adobe Illustrator and brought into Hype as SVG objects. In order to reduce file size and speed up rendering all scenes and transitions are separate hype files. For presentation I rendered every scene as a 4K video clip at 60fps which were combined and merged with a soundtrack in iMovie. The end result was posted on Vimeo in 4k (max. res is available under the gear icon)

3 Likes

Very cool! Everything looks super sharp. Is there a version on the web as well?

Thanks! It’s not yet on the web. Since I broke up the project in chunks in order to simplify the files and speed up rendering to video I’m stuck with multiple Hype projects. So now the question is how to merge these files (and wonder what Hype can manage regarding complexity and filesize) or find a way to invisibly string together separate exported Hype folders containing the chapters. Unfortunately I’m not a coder, so I hope to find something that may work in the forum. If you happen to know a solution, directions are welcome :sweat_smile:

For your project the only thing I would recommend is to turn off preloading for your images and you should be all good. To get your separate Hype documents into a single, copying an entire scene into a master document is the way to go.

Your exported JS file may be large, but since servers gzip this file it won't actually be that big in reality. If the majority of your images are SVGs, they should download quickly as each scene is loaded (assuming you've turn preloading off). My suggestion is to get it all in one piece first and optimize later based on how it feels when you load it.

1 Like

You could also just string one chapter to the next by loading the next HTML file with the "Goto URL…" action at the end of each chapter.

2 Likes