One of my more interesting projects in recent memory was an animated accordion infographic for Duke Health’s Population Health Management Office. The client wanted a fun, interactive tool to explain all of the services they offer patients.
In the olden days, I would typically use Flash to create an animation like this. It would be a combination of timeline animation and ActionScript code, and the resulting SWF file would be embedded in an HTML file. There were a few problems with this method, including incompatibility, slow load times, and security holes inherent in using Flash player. These issues plagued web animators so much that Adobe finally killed its Flash Player in 2017. Next year, Flash will just stop working on the web.
Luckily, HTML5 rules just as much as Flash drools. It doesn’t require additional software like the dreaded Flash Player plugin, it’s open format, and it’s cross-platform. If you’re comfortable with front-end coding, you can create anything from a simple rotating banner ad to a robust web app using HTML5.
To create my accordion, my workflow was this:
- Create art in Illustrator, making sure to name each layer.
- Export art as SVG.
- Call each art element that needs to animate using my assigned layer names within the code.
I love this type of project because it forces me out of my comfort zone, and I always enjoy learning new technologies. Check out the result below. I’m pretty happy with how it turned out, and I’m excited to use more GSAP in the future.