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 animated accordion, I decided to use an HTML5 JavaScript library called GreenSock Animation Platform (GSAP). GSAP is awesome for many reasons, but arguably the best reason is its speed and the resulting silky smooth animations. Check out this showcase of impressive GSAP projects, and the demo below from the GSAP team.
See the Pen GreenSock Home Page Animation by GreenSock (@GreenSock) on CodePen.
To create my accordion, my workflow was this:
- Create art in Illustrator, making sure to name each layer.
- Export art as SVG.
- Write the JavaScript to create simple animations using GSAP.
- 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.
Leave a Reply