Web Animation Workshop

I just got back to my apartment after spending two days at the Web Animation Workshop in Portland! It was my first tech conference, and I am still feeling inspired from it. I can’t wait to start using what I’ve learned.

Instead of writing one long piece at the end, I decided to instead capture my thoughts throughout the experience. Every couple of hours I made a note of what I was doing and how I was feeling about it. Here it is!

Day 1


In my hotel room, reading up on svg coordinate systems and downloading a markdown note-taking app so that I can be prepared for the workshop! About to walk over in a few. I’ve already explored the city a bit and found Alchemy Code Lab, where the workshop will be taking place. I’m still on NEw York time.


Learning about how Disney’s 12 principles of animation are applicable to modern UI design. Love all the examples! Unfortunately some technical issues with some of the videos, which are important for talking about animation.


In the past 20 minutes I realized at least 3 ways to make my site better. For me, the sections on continuity and choreography have been the most effective so far!


Feeling very inspired. I know that this is just the tip of the iceberg in terms of UX design, but I already feel like I have learned so much. I feel confident that some of these tips would improve conversion rates on my site by keeping users more engaged. Some of the choices I have unknowingly made might actually be hurting.


We are getting tips on how to get our companies to buy into the fact that animations are important – so glad they addressed this! Main takeaway: create buy-in by tackling something simple first and doing it well, create simple prototypes that get the point across.


Just had lunch and a nice conversation with some other bootcamp grads. Just in time, the jet lag was starting to hit, but I’m feeling excited for the rest of the day!


Overview of CSS animations has been a bit of a review for me – going over basics of transitions and key frame animations, which I have been using at work. Excited to move into more advanced topics later.


Fun mini-project animating a robot https://codepen.io/galencorey/pen/RLrjKO?editors=1100


Annnd on the flip side, the lecture on GSAP (a JavaScript library for animations) is seeming incredible fast and complicated. I’m also not totally sure it is something I can apply to my current work, although it definitely a very powerful tool.

Day 2


Feeling better rested and very excited to learn about how to do SVG animations and animate with React! I am still rereading that article about SVG coordinates from yesterday, it’s pretty complex.


Having lots of fun playing around with GSAP animations and seeing what can be done. One of the speakers, Sarah Drasner, is showing us her work and it’s absolutely incredible!


I can’t believe the woman who wrote the actual book on SVG animations is helping me animate a bouncing ball.


Itching to get started on an SVG animation for the loading screen for our site. I have a renewed sense of how code can be both extremely creative and extremely technical. Creating an animation requires a totally different way of thinking.


Keep getting carried away working on the mini-projects, wish there was more time to work on them.


Gahh finally react. I keep getting overwhelmed with how much I want to do.


I wonder if my boss will let me use any of these libraries.


Also, why am I so stuck on how I can use this for work and not how I can use this for fun? The good thing about what I am learning now is that it can be applied to both.