Behind the Design: How A Map Went From Static to Animated

The Design Idea

“While the Bend the Arc: A Jewish Partnership for Action, is an organization that doesn’t engage in political advocacy, they do train leaders around the country, and those leaders have a lot of impact,” says Amy Stuart, cStreet Campaigns CEO and Creative Director. “We wanted to show that in an engaging way.”

“The map is designed in perspective to create depth, and the bright yellow pins are dropped on top as though they’re fiery beacons in the dark field,” says Amy.

For continuity, the map is carried over on the Bend the Arc: Jewish Action site and given a stylistic treatment to match colour scheme and feel of the site.

The Web Development

The beauty of being a web developer is that you are always learning. So much of the dev process is googling “how to…” in order to tackle new challenges.

While Amy’s animated SVG map for Bend the Arc: A Jewish Partnership for Justice and Bend the Arc: Jewish Action looks quite simple, making it a reality was anything but. It required learning the ins and outs of SVGs before even attempting to animate anything. Not only did I need to make the pins drop but I needed to make sure that the map was completely responsive and that it reacted differently on different device screens.

An SVG file is a complicated bunch of letters and numbers plotting points, denoting colours and establishing positions. First, I had to identify which parts of the SVG code were the pins.

Then I had to identify which parts of the SVG code were the shadows for the pins in order to make sure that they appeared when the pins hit the map.

Then I had to figure out where the position of the pins were in order to create an end position for them pin after they dropped, no matter what the size of the viewport.

Once all that was done, I calculated what position I wanted the pins to drop from, what speed I wanted the pins to drop at and how I wanted the pins to bounce (with help from cStreet’s Lead Developer, Alex Flint).

JavaScript handles the drop while HTML via keyframes controls the bounce, and voilà! Amy Stuart’s idea is brought to life.