https://github.com/WebAnimationWorkshops/workshop-resources

Houses the resources for WAW workshop
https://github.com/WebAnimationWorkshops/workshop-resources

animation codepen svg-animations waw web-animation-workshops web-animations workshop-resources

Last synced: 16 days ago
JSON representation

Houses the resources for WAW workshop

• Host: GitHub
• URL: https://github.com/WebAnimationWorkshops/workshop-resources
• Owner: WebAnimationWorkshops
• Created: 2016-11-08T20:50:52.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-18T21:42:34.000Z (over 6 years ago)
• Last Synced: 2024-08-01T19:52:37.391Z (4 months ago)
• Topics: animation, codepen, svg-animations, waw, web-animation-workshops, web-animations, workshop-resources
• Language: JavaScript
• Size: 139 KB
• Stars: 152
• Watchers: 15
• Forks: 39
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# 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](http://slides.com/vlh/waw-intro?token=eE_f3_XU)

* [Classic animation principles worth stealing](https://www.slideshare.net/secret/1yK01w1F4bNpNz)

* [Principles of UI/UX animation](http://slides.com/sdrasner/waw-principles-ux?token=258_EYo8)

* [Essentials of CSS animation](http://slides.com/vlh/waw-cssanimation?token=emxTzAcD)

* [Basics of TweenMax & TimelineMax](http://slides.com/sdrasner/waw-gsap?token=rg606T3G)

* [SVG workflow and optimization](http://slides.com/vlh/waw-svgworkflow?token=V4aSNC9y)

* [SVG animation](http://slides.com/sdrasner/waw-svg-animation?token=D-wwuju5)

* [Intro to Animating with React](http://slides.com/vlh/intro-anim-react?token=CNlmb06B#/)

* [Animating with React cont.](http://slides.com/sdrasner/waw-react?token=Pmgv8l9k)

## Further Slide Resources:

* [Web Animation Performance](http://slides.com/vlh/waw-webanimationperf?token=3xSwGsW5)

* [The Web Animation API](http://slides.com/vlh/waw-waapi?token=wz6rRkTn)

* [Mo.js](http://slides.com/sdrasner/svg-workshop-mojs?token=wAkiI-Pe)

## CodePen Collections:

* [CSS Excercises](http://codepen.io/collection/DBLaex/)

* [SVG Animation and GreenSock](http://codepen.io/collection/XvBQJQ/)

## Our Twitter Contact Info

* [Sarah Drasner](https://twitter.com/sarah_edo)

* [Val Head](https://twitter.com/vlh)

## License

[![Creative Commons License](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-nc-sa/4.0/)

This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/)