Ladies of Creative Coding, CSS and Web Animations

I was inspired by this post after someone sent a funny video about how a dev team solved a problem and the only woman was the “mean” project manager. Like a few other women who got the link to the video, I thought it was a little stereotypical. That is because as I’ve learned more about CSS and creative uses of CSS and web animations, I’ve come to notice that a few experts and thought leaders in creative CSS and SVG animation are female. There are obviously more than I’m going to list here, but this post is based on my personal experiences with what they’ve put out.

In the order of whose work I last interacted with:

Sarah Drasner

I just finished Sarah’s course on Lynda, Advanced SVG Animations. It was originally produced by Frontend Masters, not Lynda. It’s more of an edited live course (with students in the room) than an online course, so the educational style is very different from Lynda. (I personally did not like this format for Lynda, but I think it would be much better as an in-person course.)

Her course went into using GreenSock Animation Plugin (GSAP) and a few of their plug-ins: Draggable, DrawSVG [Plugin], motion on a path as an animation technique, SplitText, and HSL color tweens. She also talked about how she plans her animations and showed examples of her work throughout the course.

 

Sarah also made an appearance on The Coding Train, on YouTube. Here she is giving a tutorial on web animations and Mo.js.

Sarah seems like an expert – a Frontend Master, if you will – on web animations, especially with SVG, GSAP, and any host of JavaScript or web plugins related to animation. In her Lynda/Frontend Master’s course, Sarah said she makes it a point to learn the animation capabilities for new JavaScript libraries and plugins. So for React, she’d learn the animation capabilities in React. For Angular, the animation capabilities in Angular. And so on, and so forth. That seems like a really smart way to keep up to date in an area of programming/web that you’re really interested in. (Mental note: I should do this too.)

 

Val Head

I came across Val’s course, also on Lynda, where she teaches a course on CSS Animations.

In looking up Val’s Lynda profile, I’ve also just discovered that she also teaches a course on responsive typography, called Responsive Typography Techniques! This course looks like it would go really well with the two web typography courses by Laura Franz, Typography for Web Designers and Choosing and Using Web Fonts, both of which I also highly, highly recommend.

Val was also a guest instructor on the Coding Train.

Val also teaches an in-person web animation course with…Sarah Drasner! Web Animation Workshops. These are one- and two-day courses, in multiple cities around North America and Europe (and possibly even further than that). Given that it’s now October, there aren’t many left this year. But, check out the website now so you can ask your boss for some funding for next year. They also have scholarships for underrepresented groups, if you happen to belong to one. You can sign up for announcements on new classes on the website.

Val also curates the UI Animation newsletter. The newsletter is how I found out about and joined, the Creative Coding Club. I feel terrible saying that I haven’t read many of Val’s UI Animation articles in a while. (Let’s be honest: I haven’t had much time to keep up with Creative Coding Club either. And let’s be even more honest and say I haven’t had time to keep up with much of my personal email, in general!) I might need to resubscribe with a different email address, because the links she shares are very inspirational and educational. And I want to keep up with what’s going on.

 

Leah Verou

I am not quite sure when or where I came across Leah Verou’s work, but it was obviously while I was trying to figure out CSS gradients because I’ve had her wonderful site, CSS Patterns Gallery, bookmarked for a year or two. You can look at my own project sites to see that I’ve used her CSS background patterns multiple times on my own projects. I probably also came across her Cubic Bezier site, as well, most likely during a CSS animation tutorial. You can find more of her projects on her website, http://lea.verou.me/projects/.

As I’m writing this, I cannot remember all the things that made me think of Leah, except for the bookmarks to her CSS gradients page. I think that at one point in the semi-recent past, it seemed that every time I looked for some building block for some cool CSS thing-a-ma-jig, turned out she’d already built it. I really hope she teaches a class somewhere, someday, because she really seems to know her stuff!

 

Rachel Nabors

To be fair, I have not signed up for any course with Rachel Nabors. Nor have I had much experience with her work. But, she does run a web animation Slack channel, called Animation at Work. Many of the discussions there seem a little over my head right now, but I want to keep involved and stay learning. She also offers a few online courses and has a book published by A Book Apart, called Animation at Work. She also runs a web animation newsletter, Web Animation Weekly. Check out the Archive if you’re interested in learning more. (As you’ve guessed, I am not really reading this newsletter either.)

Rachel is also an amazing Illustrator, and her animations look really good! You can find examples of her work, and get a sense of what I mean about her animation/cartooning skills, by checking out her website(s):

Many of her courses seem to cover a lot of topics as Val Head. But, if you’re interested in CSS animation, motion, and transitions, my experience has been that the best results come from learning from as many sources as possible. Sign up for both!

 

Shoutouts and More Ladies to Look Up:

Sarah Drasner mentioned Sara Soueidan (pronounced Sweden) a couple of times in her course. I looked her up and she seems like a pretty amazing front-end developer. She is on Twitter @SaraSoueidan. Sarah also mentioned Joni Trythall and Amelia Bellamy-Royds in her credits at the end of her course. I will have to look them up later…

Nat Cooper is the founder of the Creative Coding Club. Like Rachel Nabors, she has amazing graphics skills and comes up with some pretty sweet animations and keeps the group motivated every month. Find her on Twitter @natacoops and the Creative Coding Club (@artcodeclub).

William Kentridge: South African Artist

In February, I watched a EuroNews report about a South African artist named William Kentridge, whose work is being shown in Copenhagen, Denmark. Here’s the article video.

Link to the article on EuroNews.com

I was very interested in learning more about the artist after seeing that he uses a combination of video installations, animation, and live action. As seen in clips in the article, he’s also not afraid to explore the difficult history of his country. As MoMA puts it, “Dealing with subjects as sobering as apartheid, colonialism, and totalitarianism, his work is often imbued with dreamy, lyrical undertones or comedic bits of self-deprecation that render his powerful messages both alluring and ambivalent.”

This can be seen in the following video, which is embedded in the text of the article. It’s like a New Orleans marching band, set in a lyrically dystopian world.

When I looked up more about the artist, I was surprised to find that he was not ethnically African, because as the video shows he is using black subjects in the artwork. In my experience, it’s not that common to find an artist using the experience of another ethnicity in their artwork, although it does occur in decorative arts, photography, and performing arts.

I suppose performing artists do this because music, dance, and theater are somewhat universally accessible for all people. Photography is a little different, in that the photographer has to take a documentarian or voyeuristic point of view, as opposed to being part of the art. Wikipedia explains that Kentridge is Jewish, with attorney parents that fought against apartheid. Perhaps he felt like both an outsider, voyeur-documentarian and part of the struggle in South Africa.

What I find revealing is how well Kentridge’s use of African subjects shows his strong empathy and understanding of apartheid and this difficult period of South African history. He says, in Pain & Suffering, shown on art:21, that artists use the pain and suffering of others for their work.

Animation Style

Wikipedia explains one of his animation methods:
“in all of his animated works do the concepts of time and change comprise a major theme. He conveys it through his erasure technique, which contrasts with conventional cel-shaded animation, whose seamlessness de-emphasizes the fact that it is actually a succession of hand-drawn images. This he implements by drawing a key frame, erasing certain areas of it, re-drawing them and thus creating the next frame. He is able in this way to create as many frames as he wants based on the original key frame simply by erasing small sections. Traces of what has been erased are still visible to the viewer; as the films unfold, a sense of fading memory or the passing of time and the traces it leaves behind are portrayed.”

The video above doesn’t show one of this animation style very well, but his style can be seen in other clips. He also uses stop-motion.

Other Work

Aside from animation, he uses live video and different masking and editing effects in his work. Here’s a video of him, from the Danish museum, the Louisiana, interviewing himself:

More Resources

I won’t be in Copenhagen anytime soon. But if you’re interested in learning more about William Kentridge, there are examples of his work online.

Louisiana Museum of Modern Art

Of course, there is the Louisiana Museum that is currently holding a William Kentridge exhibition. It looks like an interesting exhibit. The site is in Danish, but Google should be able to translate.

art:21

art:21 has the most examples of him working and explaining his process. There are several clips of some of his video/media pieces.

MoMA

MoMA has an archival page documenting his 2010 exhibition, Five Themes. Also still available is a flash-site that contains many examples of his work and his process.

Wikipedia

Wikipedia also has plenty of information about Kentridge, from his bio, to listing his films and many exhibitions around the world. There are also external links, if you’re interested even more information about this artist.


UPDATE: ARTSy.NET

In August 2017, Artsy.net reached out to me to inform me of their web page on William Kentridge.

Our William Kentridge page provides visitors with Kentridge‘s bio, over 350 of his works, exclusive articles, and up-to-date Kentridge exhibition listings. The page also includes related artists and categories, allowing viewers to discover art beyond our Kentridge page.

I took a look and it does have a lot of great information about this artist, including many images. So if you are looking for additional info, take a look!

Kihachiro Kawamoto: Japanese Animator

I recently watched The Exquisite Short Films of Kihachiro Kawamoto. I had never heard of this animator and I did not know what type of animation I was going to get. But, being a fan of animation, I looked forward to watching the DVD.

After watching a few, I did a little research. It turns out that Kawamoto was a well-known animator in Japan and internationally. One of his signature animation styles is stop-motion animation, especially his use of puppets. As Wikipedia points out, Kawamoto was well known for his puppet making skills and design.

The Films

I wanted to share these films as another example of storytelling. Japan has so many traditional methods of storytelling, which these films are a part of. As far as World and Character go, many Japanese stories are set in the samurai/Edo period. Most of the films below are the same. I suppose that frees up the storyteller to focus on the subtleties of how the story is told, rather than convincing the audience that the world and characters are believable. For instance, in Dojoji, there’s a scene where the woman chases after the priest. I love that Kawamoto takes the time to animate her breathing.

All the Kawamoto films were good, but there were a few that stood out to me. Here they are below:

Dojoji

19 minutes

Dojoji is a well-known Japanese play and one of the few that involves a large prop. The play tells the story of the installation of a new bell in Dojo-ji Temple. After the monks have been hypnotized by a mysterious dancer, the abbot tells the story of what happened to the first bell. The story is a woman falls in love with a priest who stays in her father’s inn every year. When the woman admits her love, the priest rejected her. She pursues him anyway, across a river to Dojoji Temple. In her passion, she transforms into a demon that kills him and destroys the bell. Kawamoto’s version of Dojoji is the story of the woman and the traveling priest. It is very tragic.

Going into the story of Dojoji more, I’d heard of this story after watching a Japanology episode on Kabuki and Noh. Dojoji was one of the examples of Kabuki, which is more elaborate than Noh and features a female dancer.

I was very impressed with the beautiful watercolor backgrounds serving as the backdrop for Dojoji and House of Flame (below). The sets are also well done.

The Demon (or Oni)

7:30 minutes

The Demon is also based on an old story, but I did not come across any versions of it as a play. The story is that an old woman, who has had a hard life, now lives as an invalid with her 2 sons. One day they go out to hunt and come home to a shocking discovery.

The postscript of the story is: “It is said that parents in their old age become demons who will consume their children.” Maybe this is the origin of the practice explored in Ballad of Narayama?

House of Flame

19 minutes

House of Flame is another stop-motion puppet animation that caught my interest. This one animates a horse, very realistically. I was quite impressed. This is also the only story with a narrator for the puppets. The story is about a woman who cannot decide between two suitors and lives in guilt forever more.

As I mentioned above, this one is another example of beautiful backdrops and sets.

A Poet’s Life

19 min

I chose this story for the interesting story about a worker who is fighting for worker’s rights after losing his job. The details of this story are too unusual to give away, but it is a very unique story.

This animation is a drawn style, though it still could be stop motion using paper cutouts. It reminded me more of The Snowman, by Diane Jackson, because of the way the pencil markings jump around frame by frame.