Portfolio: Remember

One year later

In the summer quarter of 2002, I was teaching a Flash-based animation class. By the middle of the quarter we had covered all of Flash's animation techniques. The first year anniversary of the September 11 attacks was coming up and was the inspiration for a project to demonstrate animation skills. My students were to create an animation that expressed their reactions to the one year anniversary of the 9/11 attacks. I created this particular animation to use as an example for the assignment. The students' animation needed to meet specific size parameters and also include a second, mini thumbnail animation. All of the animations from the project would be collected into one Flash interface. Ah, Flash. Those were the days.

See the Pen Remember by Patricia Kruep (@littleberry) on CodePen.

Concept

The concept for this animation focuses on the ephemeral nature of life and memories. At the one-year anniversary we are remembering the two Towers, the Pentagon, the passengers of crashed flight in Pennsylvania, and the first responders who died trying to save others. By this time, what is left are the memories, images, and scars of our experiences of the event.

By the time I revisit this animation, 15 years later, the majority of my students were small children during the 9/11 attacks. Most of them have a little or no memory of those events. What they have are the ephemeral images on the screen and the stories their parents tell about where they were when the planes crashed.

Conversion

When the 15 year anniversary of the 9/11 attacks approached, I had been exploring how to do animation with the SVG format. In part because I was again teaching a web animation class and Flash was pretty much out. We had worked on creating animations in CSS and Canvas. I wanted to see if SVG animation would work for us as well. The best way to learn is by trying it out. It seemed appropriate to take an animation completed in Flash and re-create it using SVG and SMIL. And that's what this project is all about.

Design

Graphics

The first step was to export the assets from flash to SVG. By this point, Adobe had replaced Flash with Animate. Animate complained about opening the old files, but did it anyway. I was able to export the graphics as SVG but exporting the animation wasn't yet supported. I would have to do the animation in code (which was really the point of the exercise).

As the project progress, it became evident that I needed to redo the graphics to reduce animation weirdness and streamline the files overall. In the case of the firetruck I had to rebuild the graphic entirely using shapes where possible. The exported files also needed a little editing add IDs to make the graphics symbols sent to set up the stroke in felt colors so they could be controlled by CSS.

Color and type

The palette is spare using only a light gray for the background, light blue for the animation background, and white for the graphics and text. The SVG elements' fill and stroke values were assigned currentColor so they could be controlled by CSS. The typeface used is Bitter, from Google fonts.

Layout

I also wanted to make the layout flexible to the height and width of the viewport--something I couldn't do before with Flash. The light blue background is <div> whose width, height, and position are scaled to the viewport using vw and vh units. The graphics are SVG symbol instances placed on top of one another in the center of the <div>, as if they were layers in Illustrator. The SVG scales with the size of the parent <div>. Unfortunately, I haven't come up with a way I liked to make the SVGs layout (notably the ribbon and date at the end) adjust to different aspect ratios or orientations. I know I could do this with CSS and @media queries. For this project, though, I wanted to focus primarily on what I could do with just SVG and a minimal amount of CSS and HTML.

Animation

The animation goes with a Ken Burns-type effect. The graphics fade in and fade out with a little bit of translation or scale--sort of like memories coming in and out of focus. The focus was on learning and using the SMIL language for controlling SVG animation. I wanted to control the timing of the animation more so than I could with CSS. I also wanted to compare and contrast CSS animation with SMIL animation. SMIL allowed me to chain animations together. It took a little while to work through all the kinks, but eventually I was able to have each image animate in sequence. When animating scale to make it appear the images are zooming in or out, there's a slight shift in the position. I needed to translate the graphic while it was being scaled. I know this was due to the position of the origin point and I think next time I will rethink my viewBox and/or position of the graphic in the SVG file to compensate. In the end, I decided the effect was serendipitous and let it be. I hope SMIL sticks around for a while as a viable animation option. CSS is mostly stronger and probably better supported but SVG and SMIL offer some opportunities for control that CSS lacks.