Animated posters bring iconic Swiss design to life

Swiss in CSS pays homage to the International Typographic Style.

See the Pen Konstruktive Grafik by Jon Yablonski (@jonyablonski) on CodePen.

Detroit-based interactive designer Jon Yablonski has brought eight classic Swiss-style posters to life in an animated side-project, Swiss in CSS.

Created in homage to the designers who pioneered the influential International Typographic Style, Swiss in CSS adds a new dimension to each iconic poster by animating key design elements.

"I was seeking an opportunity to flex my front-end development skills outside of the constraints of a client project, specially in regards to CSS animations and JavaScript without leaning on libraries," explains Yablonski, who works by day as a senior design lead at digital company Vectorform.

Josef Müller-Brockman's Zürich Tonhalle / 1955 poster is the first that Jon Yablonski recreated in the series

The most challenging part of the Swiss in CSS project involved figuring out how to structure the more complex posters and then sync the animations. In particular, he says, the CBC Annual Report poster proved problematic because there were so many layers.

"The solution for each poster was the same," Yablonski says. "Break the poster into smaller parts, take one step at a time recreating the layers, then experiment with different keyframe animations, timing-functions, and durations until it all feels right."

You can see more of Yablonski's work on his website.

Liked this? Read these...

ABOUT THE AUTHOR

Julia Sagar is a commissioning editor and writer for Creative Bloq, Computer Arts, net, 3D World and IFX magazines. Tweet her @JuliaSagar