https://github.com/sdras/frontendmasters-svganimation

Frontend Masters- Advanced SVG Animation Course
https://github.com/sdras/frontendmasters-svganimation

Last synced: about 2 months ago
JSON representation

Frontend Masters- Advanced SVG Animation Course

• Host: GitHub
• URL: https://github.com/sdras/frontendmasters-svganimation
• Owner: sdras
• License: mit
• Created: 2015-10-18T00:06:56.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-19T00:46:27.000Z (almost 9 years ago)
• Last Synced: 2024-07-05T06:17:08.029Z (2 months ago)
• Language: HTML
• Homepage:
• Size: 141 KB
• Stars: 196
• Watchers: 12
• Forks: 32
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#Frontend Masters: Advanced SVG Animations

Author: Sarah Drasner

All relevant slides from this lecture series are here:

* [Part One](https://slides.com/sdrasner/frontendmasters1/)

* [Part Two](https://slides.com/sdrasner/frontendmasters2/)

* [Part Three](https://slides.com/sdrasner/frontendmasters3/)

All pens used in the slide lectures are in this [Codepen Collection](http://codepen.io/collection/XvBQJQ/).

Included in this repo are some very basic GSAP starter kits. 

##Part One, Section Three

There is a resource for the sprite and CSS animation SVG, should you need a starter resource.

##Part Two, Section Five

[GreenSock Docs](http://greensock.com/docs/#/HTML5/), [Forums](http://greensock.com/forums/), and [Easing Visualizer](http://greensock.com/ease-visualizer).

There are three directories you can use as GSAP starter kits:

* basic-tween

* basic-timeline

* master-timeline

##Part Two, Section Six

There are a few ways to work with the GSAP timeline in this file: gsap-resources.js. For any interaction with jQuery, remember to use the 3.0+ version. [Alpha](https://code.jquery.com/jquery-3.0.0-alpha1.js)