Web Animation Workshops Resources

This repo houses resources for Web Animation Workshops

Authors: Sarah Drasner and Val Head

We'll be using CodePen for both the teaching demos and the homework so that we can get you up and running faster. For sections covering React-Motion, it may make more sense to use Create-React-App so that your workflow more closely mirrors development, but that decision is up to you.

Password to all decks is WAW!

Slides:

• Introduction
• Classic animation principles worth stealing
• Principles of UI/UX animation
• Essentials of CSS animation
• Basics of TweenMax & TimelineMax
• SVG workflow and optimization
• SVG animation
• Intro to Animating with React
• Animating with React cont.

Further Slide Resources:

• Web Animation Performance
• The Web Animation API
• Mo.js

CodePen Collections:

• CSS Excercises
• SVG Animation and GreenSock

Our Twitter Contact Info

• Sarah Drasner
• Val Head

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License