{"id":13825011,"url":"https://github.com/sdras/svg-workshop","last_synced_at":"2025-04-04T07:05:41.195Z","repository":{"id":41446946,"uuid":"60487530","full_name":"sdras/svg-workshop","owner":"sdras","description":"Materials for SVG Essentials \u0026 Animation Course","archived":false,"fork":false,"pushed_at":"2019-01-15T00:27:34.000Z","size":99,"stargazers_count":808,"open_issues_count":2,"forks_count":319,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-10-11T15:45:26.785Z","etag":null,"topics":["codepen","greensock","gsap","react","svg","svg-animations","svg-workshop","timeline"],"latest_commit_sha":null,"homepage":"https://frontendmasters.com/courses/svg-essentials-animation/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sdras.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-06T00:22:45.000Z","updated_at":"2024-10-10T16:45:41.000Z","dependencies_parsed_at":"2022-07-30T13:08:11.729Z","dependency_job_id":null,"html_url":"https://github.com/sdras/svg-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdras%2Fsvg-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdras%2Fsvg-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdras%2Fsvg-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdras%2Fsvg-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sdras","download_url":"https://codeload.github.com/sdras/svg-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135142,"owners_count":20889420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codepen","greensock","gsap","react","svg","svg-animations","svg-workshop","timeline"],"created_at":"2024-08-04T09:01:13.435Z","updated_at":"2025-04-04T07:05:41.164Z","avatar_url":"https://github.com/sdras.png","language":"HTML","readme":"# SVG Essentials \u0026 Animation Course Materials\n\nStarter Materials for the SVG Animation Course\n\nAuthor: Sarah Drasner\n\nThis repo houses the materials and resources for the [SVG Essentials \u0026 Animation course](https://frontendmasters.com/courses/svg-essentials-animation/) on Frontend Masters. \n\nMost of the materials for the course are outlined below, but there are also directories housed here of very basic examples of some of the techniques we will cover so that students don't have to spend a lot of time researching in order to get started. It is recommended that students use CodePen to create work for the duration of the course, as we'll use preprocessors like SCSS as well as Babel for ES6 and codepen makes it easy to do so without time devoted to setup. If you like, you can also scroll to the CodePen collection section and fork one of the existing pens in those collections, they are comprehensive. GreenSock pens in the collection use member's only plugins that are CodePen-safe. For MorphSVG, DrawSVG, and FindShapeIndex sections, localhost will fail and using CodePen is recommended.\n\nHere is a URL that has all of the codepen-safe versions of the [GSAP Plugins](http://codepen.io/GreenSock/pen/OPqpRJ)\n\nHere is the codepen debugger [chrome extension](https://chrome.google.com/webstore/detail/codopen/agnkphdgffianchpipdbkeaclfbobaak)\n\nFor 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.\n\n## Slides:\n\n* [SVG Workshop 1](http://slides.com/sdrasner/adv-svg-1?token=UCdXy3zz)\n* [SVG Workshop 2](http://slides.com/sdrasner/adv-svg-2?token=FxyYIMcu)\n* [SVG Workshop 3](http://slides.com/sdrasner/adv-svg-3?token=IiYk_UQj)\n\n## Bonus:\n\n* [SVG Workshop- DataVis](http://slides.com/sdrasner/svg-workshop-data-vis?token=rC0MZakh)\n* [SVG Workshop- Mo.js](http://slides.com/sdrasner/svg-workshop-mojs?token=wAkiI-Pe)\n\nAll slides have password svgisawesome!@\n\n## Collections:\n\n* [SVG and CSS/GreenSock CodePen Collection](http://codepen.io/collection/XvBQJQ/)\n* [SVG Resources](https://codepen.io/collection/DkNQaP/)\n* [My Favorite SVG Animations- inspiration](https://codepen.io/collection/XvBrJr/)\n* [Intro to D3 Collection](http://codepen.io/collection/XKgVVV/)\n* [Mo.js Collection](http://codepen.io/collection/XOEKow/)\n\nIncluded in this repo are some very basic starter kits.\n\n## Part One, Section Three\n\nThere is a resource for the sprite and CSS animation SVG, should you need a starter resource.\nSVG Resources:\n\n* [http://icomoon.io/](Icomoon.io)\n* [https://thenounproject.com/](The Noun Project)\n* [http://www.freepik.com/](Freepik)\n\n## Part Three, Section Six\n\n[GreenSock Docs](http://greensock.com/docs/#/HTML5/), [Forums](http://greensock.com/forums/), and [Easing Visualizer](http://greensock.com/ease-visualizer).\n\nThere are three directories you can use as GSAP starter kits:\n\n* vanillajs-interaction\n* basic-tween\n* basic-timeline\n* master-timeline\n\n## Part Four, Section Seven\n\nThere are a few ways to work with the GSAP timeline in this file: gsap-resources.js.\n\n## DataVis\n\nThe starter resource for this section is in the directory basic-d3. This is d3 version 4, so be wary that if you try out of the box things that exist in the d3 docs for the blocks, they might not work. (Not very many d3 blocks have been updated.) Big changes include axis and transition, new version demo-ed here.\n\n## React\n\nThere are two basic starter directories included here for React. One is basic-react-svg-css, which shows a very simple use case of a reusable SVG component animated with CSS. There is also basic-react-motion, which shows a single staggered motion animation.\n\n## Mojs\n\nMojs-shapes directory includes every out of the box shape that mo.js allows you to create. You can also create custom shapes (look in the mo.js codepen collection for bouncy radio demo for an example).\n\nMojs-tools directory shows a simple shape tween and .then() syntax with both timeline and curve-editor tools loaded in.\n\n## License\n\n[![Creative Commons License](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-nc-sa/4.0/)\n\nThis work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/)\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsdras%2Fsvg-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsdras%2Fsvg-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsdras%2Fsvg-workshop/lists"}