This application renders a few triangle svgs which have some very basic css animations and click events. Below are the resources I used during the morning workshop at DevMountain on 2/26/18.
-
Creative Coding with React & SVG (this is the video I followed to make the animated triangles. It is super cool and easy to follow.)
-
Popular Third-party libraries used to help with animating SVGs
- What are SVGs, and why are they cool?
- Small file size compared to images like .jpg and .png
- You can access and manipulate/animate all the individual pieces (xml)
- This also means you can be very precise with click events
- Show some elaborate examples to get students excited before starting with basics
- Sarah Drasner’s codepens
- MoJS examples
- Show css shapes vs svg shapes
- Talk about the path element
- Show how React works well with svgs
- Beware of jsx syntax differences
- Build triangle example using components
- Other scenes from Creative Coding with React & SVG video
- Show animation using css and click events
- Triangle example
- Talk about stroke-dasharray and stroke-dashoffset
- SVG line animation resource (css-tricks article)
- Codepen button example
- Introduce Emily’s repo
- Talk about how she really used state to help with her animations
- Mention requestAnimationFrame()
- Mention that there are third party libraries Mo.js, snap.svg, greensock to help with animating svgs