• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Hilary Stoddard Design Logo

Hilary Stoddard Design LLC

Graphic Designer For Hire in Raleigh, NC

  • Portfolio
  • About
    • An Anti-Racist Business
    • FAQs
    • Services
    • About
  • Blog
  • Contact
  • Email
  • LinkedIn

Adventures in Javascripting

April 4, 2019 by Hilary Leave a Comment

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:

  1. Create art in Illustrator, making sure to name each layer.
  2. Export art as SVG.
  3. Write the JavaScript to create simple animations using GSAP.
  4. 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.

Filed Under: Web Development Tagged With: animation, coding is fun, duke, gsap, html5, javascript, webdev

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Let’s Talk

I'm currently available for freelance work.

Email Me

Footer

Technical Skills

Adobe Certified Expert InDesign Badge
  • Adobe InDesign
  • Adobe Photoshop
  • Adobe Illustrator
  • WordPress
  • HTML5/CSS3

About Me

Independent graphic designer for print and web. Read More…

FAQ

Do you do pro bono work?

I do! If your non-profit organization has design needs, I am happy to review your project to see if we are a good fit.

Would you consider working on-site?

Absolutely; I've worked on-site at clients' offices and I've traveled around the country to conferences.

Where are you located?

I work primarily from my home office in the Midtown area of Raleigh, NC.

What’s your favorite software?

I'm an InDesign fanatic, and I love to spread the good word.

  • Email
  • LinkedIn

919-706-5998

Copyright © 2021 · Studio Pro on Genesis Framework · WordPress · Log in