Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: 2 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 (over 7 years ago)
Default Branch: master
Last Pushed: 2018-03-18T21:42:34.000Z (over 6 years ago)
Last Synced: 2024-05-02T04:36:49.505Z (2 months ago)
Topics: animation, codepen, svg-animations, waw, web-animation-workshops, web-animations, workshop-resources
Language: JavaScript
Size: 139 KB
Stars: 151
Watchers: 15
Forks: 39
Open Issues: 0
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md

Lists

awesome-stars - WebAnimationWorkshops/workshop-resources - Houses the resources for WAW workshop (JavaScript)

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/)