{"id":2451,"date":"2017-10-04T17:23:57","date_gmt":"2017-10-04T23:23:57","guid":{"rendered":"http:\/\/alliwalk.com\/blog\/?p=2451"},"modified":"2017-10-04T17:23:57","modified_gmt":"2017-10-04T23:23:57","slug":"ladies-of-creative-coding-css-and-web-animations","status":"publish","type":"post","link":"https:\/\/alliwalk.com\/blog\/2017\/10\/ladies-of-creative-coding-css-and-web-animations\/","title":{"rendered":"Ladies of Creative Coding, CSS and Web Animations"},"content":{"rendered":"<p>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 &#8220;mean&#8221; 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&#8217;ve learned more about CSS and creative uses of CSS and web animations, I&#8217;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&#8217;m going to list here, but this post is based on my personal experiences with what they&#8217;ve put out.<\/p>\n<p>In\u00a0the order of whose work I last interacted with:<\/p>\n<h2>Sarah Drasner<\/h2>\n<p>I just finished Sarah&#8217;s course on Lynda, <strong>Advanced SVG Animations<\/strong>. It was originally produced by Frontend Masters, not Lynda. It&#8217;s more of an edited live\u00a0course (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.)<\/p>\n<p>Her course went into using <a href=\"https:\/\/greensock.com\/\">GreenSock Animation Plugin (GSAP)<\/a> and a few of their plug-ins: <a href=\"https:\/\/greensock.com\/draggable\">Draggable<\/a>, <a href=\"https:\/\/greensock.com\/drawSVG\">DrawSVG [Plugin]<\/a>, motion on a path as an animation technique, <a href=\"https:\/\/greensock.com\/SplitText\">SplitText<\/a>, and <a href=\"https:\/\/greensock.com\/forums\/topic\/8522-tweening-hsl-color\/\">HSL color tweens<\/a>. She also talked about how she plans her animations\u00a0and showed examples of her work throughout the course.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.lynda.com\/player\/embed\/621320?fs=3&amp;w=560&amp;h=315&amp;ps=paused&amp;utm_medium=referral&amp;utm_source=embed+video&amp;utm_campaign=ldc-website&amp;utm_content=vid-621320\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div style=\"margin-bottom: 10px;\"><strong><a title=\"Learn how to work with SVGs, and use this powerful graphic format to create complex animations for multiple use cases across the web.\" href=\"https:\/\/www.lynda.com\/Web-Development-tutorials\/Advanced-SVG-Animation\/604272-2.html\">Advanced SVG Animation<\/a><\/strong> by <a href=\"https:\/\/www.lynda.com\/author\/10466100\">Sarah Drasner<\/a><\/div>\n<p>&nbsp;<\/p>\n<p>Sarah also made an appearance on The Coding Train, on YouTube. Here she is giving a tutorial on web animations and Mo.js.<\/p>\n<p><iframe loading=\"lazy\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/yRxWa8lXasI?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Sarah seems like an expert &#8211; a Frontend Master, if you will &#8211; on web animations, especially with SVG, GSAP, and any host of JavaScript or web plugins related to animation.\u00a0In her Lynda\/Frontend Master&#8217;s course, Sarah said she makes it a point to learn the animation capabilities for new JavaScript libraries and plugins. So for React, she&#8217;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&#8217;re really interested in. (Mental note: I should do this too.)<\/p>\n<p>&nbsp;<\/p>\n<h2>Val Head<\/h2>\n<p>I came across Val&#8217;s course, also on Lynda, where she teaches a course on <a href=\"https:\/\/www.lynda.com\/CSS-tutorials\/CSS-Animation\/439683-2.html\">CSS Animations<\/a>.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.lynda.com\/player\/embed\/461516?fs=3&amp;w=560&amp;h=315&amp;ps=paused&amp;utm_medium=referral&amp;utm_source=embed+video&amp;utm_campaign=ldc-website&amp;utm_content=vid-461516\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div style=\"margin-bottom: 10px;\"><strong><a title=\"Find out how to create simple CSS animations such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.\" href=\"https:\/\/www.lynda.com\/CSS-tutorials\/CSS-Animation\/439683-2.html\">CSS: Animation<\/a><\/strong> by <a href=\"https:\/\/www.lynda.com\/author\/1814049\">Val Head<\/a><\/div>\n<p>In looking up Val&#8217;s Lynda profile, I&#8217;ve also just discovered that she also teaches a course on responsive typography, called <a href=\"https:\/\/www.lynda.com\/CSS-tutorials\/Responsive-Typography-Techniques\/133331-2.html\">Responsive Typography Techniques<\/a>! This course looks like it would go really well with the two web typography courses by Laura Franz, <a href=\"https:\/\/www.lynda.com\/Web-Design-tutorials\/Typography-Web-Designers\/79411-2.html?srchtrk=index%3a2%0alinktypeid%3a2%0aq%3alaura+franz%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2\">Typography for Web Designers<\/a> and <a href=\"https:\/\/www.lynda.com\/Design-Typography-tutorials\/Choosing-Using-Web-Fonts\/97715-2.html?srchtrk=index%3a3%0alinktypeid%3a2%0aq%3alaura+franz%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2\">Choosing and Using Web Fonts<\/a>, both of which I also <em>highly, highly<\/em> recommend.<\/p>\n<p>Val was also a guest instructor on the Coding Train.<\/p>\n<p><iframe loading=\"lazy\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/VWfXiSUDquw?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Val also teaches an in-person web animation course with&#8230;Sarah Drasner! <a href=\"https:\/\/webanimationworkshops.com\/\">Web Animation Workshops<\/a>. These are one- and two-day courses, in multiple cities around North America and Europe (and possibly even further than that). Given that it&#8217;s now October, there aren&#8217;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.<\/p>\n<p>Val also curates the <a href=\"http:\/\/valhead.us2.list-manage2.com\/subscribe?u=6fbaddc8c1fce7588d1a35cb2&amp;id=8f4de2c2e5\">UI Animation newsletter<\/a>. The newsletter is how I found out about and joined, the <a href=\"http:\/\/www.creativecoding.club\/\">Creative Coding Club<\/a>. I feel terrible saying that I haven&#8217;t read many of Val&#8217;s UI Animation articles in a while. (Let&#8217;s be honest: I haven&#8217;t had much time to keep up with Creative Coding Club either. And let&#8217;s be even more honest and say I haven&#8217;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&#8217;s going on.<\/p>\n<p>&nbsp;<\/p>\n<h2>Leah Verou<\/h2>\n<p>I am not quite sure when or where I came across Leah Verou&#8217;s work, but it was obviously while I was trying to figure out CSS gradients because I&#8217;ve had her wonderful site,\u00a0<a href=\"http:\/\/lea.verou.me\/css3patterns\/\">CSS Patterns Gallery<\/a>, bookmarked for a year or two. You can look at my own project sites to see that I&#8217;ve used her CSS background patterns multiple times on my own projects.\u00a0I probably also came across her <a href=\"http:\/\/cubic-bezier.com\/#.17,.67,.83,.67\">Cubic Bezier site<\/a>, as well, most likely during a CSS animation tutorial. You can find more of her projects on her website,\u00a0<a href=\"http:\/\/lea.verou.me\/projects\/\">http:\/\/lea.verou.me\/projects\/<\/a>.<\/p>\n<p>As I&#8217;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&#8217;d already built it. I really hope she teaches a class somewhere, someday, because she really seems to know her stuff!<\/p>\n<p>&nbsp;<\/p>\n<h2>Rachel Nabors<\/h2>\n<p>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 href=\"http:\/\/courses.rachelnabors.com\/\">a few online courses<\/a>\u00a0and has a book published by A Book Apart, called <a href=\"https:\/\/abookapart.com\/products\/animation-at-work\">Animation at Work<\/a>. She also runs a web animation newsletter, Web Animation Weekly. Check out the <a href=\"http:\/\/us1.campaign-archive1.com\/home\/?u=0a8f219cf8284562f91a26ee9&amp;id=d60f6683d2\">Archive<\/a>\u00a0if you&#8217;re interested in learning more. (As you&#8217;ve guessed, I am not really reading this newsletter either.)<\/p>\n<p>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):<\/p>\n<ul>\n<li><a href=\"http:\/\/rachelnabors.com\/\">http:\/\/rachelnabors.com\/<\/a><\/li>\n<li><a href=\"https:\/\/24ways.org\/2012\/flashless-animation\/\">https:\/\/24ways.org\/2012\/flashless-animation\/<\/a><\/li>\n<\/ul>\n<p>Many of her courses seem to cover a lot of topics as Val Head. But, if you&#8217;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!<\/p>\n<p>&nbsp;<\/p>\n<h5>Shoutouts and More Ladies to Look Up:<\/h5>\n<p>Sarah Drasner mentioned <a href=\"https:\/\/sarasoueidan.com\">Sara Soueidan<\/a> (pronounced <em>Sweden<\/em>) 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 <a href=\"https:\/\/twitter.com\/search?q=soueidan&amp;src=typd&amp;lang=en\">@SaraSoueidan<\/a>.\u00a0Sarah also mentioned Joni Trythall and Amelia Bellamy-Royds in her credits at the end of her course.\u00a0I will have to look them up later&#8230;<\/p>\n<p><strong>Nat Cooper<\/strong> 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 <a href=\"https:\/\/twitter.com\/natacoops\">@natacoops<\/a> and the Creative Coding Club (<a href=\"https:\/\/twitter.com\/artcodeclub\">@artcodeclub<\/a>).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8220;mean&#8221; 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&#8217;ve learned more &hellip; <a href=\"https:\/\/alliwalk.com\/blog\/2017\/10\/ladies-of-creative-coding-css-and-web-animations\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Ladies of Creative Coding, CSS and Web Animations&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,4,8],"tags":[92,481,485,484,483,482,450],"_links":{"self":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2451"}],"collection":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/comments?post=2451"}],"version-history":[{"count":10,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2451\/revisions"}],"predecessor-version":[{"id":2463,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/2451\/revisions\/2463"}],"wp:attachment":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media?parent=2451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/categories?post=2451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/tags?post=2451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}