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

9:20AM

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.

11:01AM

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.

11:36AM

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!

12:24PM

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.

12:56PM

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.

2:21PM

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!

3:20PM

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.

3:46PM

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

4:44PM

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

9:46AM

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.

11:02AM

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!

11:35AM

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

12:44PM

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.

3:17PM

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

3:49PM

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

4:20PM

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

4:25PM

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s