Let's chat about the national debt

The nation is quickly approaching a fiscal disaster. Without major reforms, future government spending will far exceed future revenues. Despite this reality, few Americans seem concerned. Many are unaware of the problem. Others wrongly conclude that minor reforms, enacted in the distant future, will be sufficient.

America Off Balance seeks to fill this knowledge gap, providing visitors with up-to-date facts on the future of the federal budget. It encourages visitors to rethink their assumptions about the federal budget and to be skeptical of painless budget solutions often proposed by policymakers and partisan activists.

The introduction page design called for a long animation that tells the story of the ballooning national debt. In thirteen frames the mockups implied elaborate dynamic transitions between each frame — including morphing shapes — all driven by the page scroll position.

Because there is no concept of time, most animation libraries were off the table. While experimenting it became obvious that the solution will resemble a small game engine more so than an animation engine. Because the progress is tied to scroll position — which can be flicked around — it would also be necessary to dynamically interpolate values across frames. I settled on react-spring to natively drive element animations as well as dynamic SVG components where needed. The engine turned out conceptually simple and performance was good enough to continue in this direction.

One interesting aspect of building something so choreographed for the web is that it has to also be fully responsive. I found myself daydreaming about the After Effects equivalent for dynamic media. There is a lot of say about challenges and lessons learned here but it generally worked out in the end.

Tour the Budget

The second project I worked on was an interactive walk through of the U.S. budget. The tour challenges the viewer to balance the future budget by enacting popular policies to raise taxes, lower costs or improve the economy. The experience consists of multiple choice quizes and educational moments that all lead to the sobering conclusion that there is no silver bullet.

This project presented completely different challenges than the introduction — for one the sheer scale is much larger.

In place of the choreographed game loop in the introduction, I made use of intersection observers to monitor scroll progress and trigger events for the animations.