├── .DS_Store
├── LICENSE
├── README.md
├── basic-timeline
├── .DS_Store
├── README.txt
├── css
│ ├── reset.css
│ └── style.css
├── index.html
├── js
│ ├── index.js
│ └── prefixfree.min.js
└── license.txt
├── basic-tween
├── README.txt
├── config.rb
├── css
│ ├── normalize.css
│ └── style.css
├── index.haml
├── index.html
├── js
│ ├── index.js
│ └── prefixfree.min.js
└── scss
│ └── style.scss
├── gsap-resources.js
├── master-timeline
├── README.txt
├── config.rb
├── css
│ ├── normalize.css
│ └── style.css
├── index.html
├── js
│ └── index.js
├── license.txt
└── scss
│ └── style.scss
└── robotter.svg
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sdras/frontendmasters-svganimation/2b564eabc1945b47a5a1294e96effd09d432a175/.DS_Store
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Sarah Drasner
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #Frontend Masters: Advanced SVG Animations
2 | Author: Sarah Drasner
3 |
4 | All relevant slides from this lecture series are here:
5 | * [Part One](https://slides.com/sdrasner/frontendmasters1/)
6 | * [Part Two](https://slides.com/sdrasner/frontendmasters2/)
7 | * [Part Three](https://slides.com/sdrasner/frontendmasters3/)
8 |
9 | All pens used in the slide lectures are in this [Codepen Collection](http://codepen.io/collection/XvBQJQ/).
10 |
11 | Included in this repo are some very basic GSAP starter kits.
12 |
13 | ##Part One, Section Three
14 | There is a resource for the sprite and CSS animation SVG, should you need a starter resource.
15 |
16 | ##Part Two, Section Five
17 | [GreenSock Docs](http://greensock.com/docs/#/HTML5/), [Forums](http://greensock.com/forums/), and [Easing Visualizer](http://greensock.com/ease-visualizer).
18 |
19 | There are three directories you can use as GSAP starter kits:
20 | * basic-tween
21 | * basic-timeline
22 | * master-timeline
23 |
24 | ##Part Two, Section Six
25 | 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)
--------------------------------------------------------------------------------
/basic-timeline/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sdras/frontendmasters-svganimation/2b564eabc1945b47a5a1294e96effd09d432a175/basic-timeline/.DS_Store
--------------------------------------------------------------------------------
/basic-timeline/README.txt:
--------------------------------------------------------------------------------
1 | A Pen created at CodePen.io. You can find this one at http://codepen.io/sdras/pen/XmmjQb.
2 |
3 | 'Lil Demo to show the power of GreenSock (GSAP)'s cycle stagger in 1.18.0 release
--------------------------------------------------------------------------------
/basic-timeline/css/reset.css:
--------------------------------------------------------------------------------
1 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
2 |
--------------------------------------------------------------------------------
/basic-timeline/css/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 | body {
6 | width: 100vw;
7 | height: 100vh;
8 | background: rgb(243,226,199); /* Old browsers */
9 | background: -moz-radial-gradient(center, ellipse cover, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 68%, rgba(182,141,76,1) 100%); /* FF3.6+ */
10 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(243,226,199,1)), color-stop(68%,rgba(193,158,103,1)), color-stop(100%,rgba(182,141,76,1))); /* Chrome,Safari4+ */
11 | background: -webkit-radial-gradient(center, ellipse cover, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 68%,rgba(182,141,76,1) 100%); /* Chrome10+,Safari5.1+ */
12 | background: -o-radial-gradient(center, ellipse cover, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 68%,rgba(182,141,76,1) 100%); /* Opera 12+ */
13 | background: -ms-radial-gradient(center, ellipse cover, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 68%,rgba(182,141,76,1) 100%); /* IE10+ */
14 | background: radial-gradient(ellipse at center, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 68%,rgba(182,141,76,1) 100%); /* W3C */
15 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#b68d4c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
16 | }
17 |
18 | .boggle {
19 | margin-top: -2%;
20 | width: 85%;
21 | left: 7%;
22 | position: absolute;
23 | }
--------------------------------------------------------------------------------
/basic-timeline/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | SVG with Cycle Stagger
6 |
7 |
8 |
9 |
10 |
11 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
452 |
453 |
454 |
455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 |
--------------------------------------------------------------------------------
/basic-timeline/js/index.js:
--------------------------------------------------------------------------------
1 | var bP = $(".boggle path"),
2 | tl = new TimelineLite();
3 |
4 | tl.add("start");
5 | tl.staggerFrom(bP, 3, {
6 | cycle:{
7 | fill:["white", "yellow", "#e23e0c"],
8 | opacity:[0.8, 0.2, 0.5, 0.3],
9 | },
10 | ease:Elastic.easeOut
11 | }, 0.001);
12 | tl.staggerTo(bP, 3, {
13 | cycle:{
14 | y:[700, -700, -1000, 1000],
15 | x:[200, -200, -700, 700],
16 | rotation: function(i) {
17 | return i * 20
18 | }
19 | },
20 | opacity: 0,
21 | fill: "#f2bf30",
22 | ease:Circ.easeInOut
23 | }, 0.001, "start+=1.25");
--------------------------------------------------------------------------------
/basic-timeline/js/prefixfree.min.js:
--------------------------------------------------------------------------------
1 | !function(){function e(e,r){return[].slice.call((r||document).querySelectorAll(e))}if(window.addEventListener){var r=window.StyleFix={link:function(e){try{if("stylesheet"!==e.rel||e.hasAttribute("data-noprefix"))return}catch(t){return}var n,i=e.href||e.getAttribute("data-href"),a=i.replace(/[^\/]+$/,""),o=(/^[a-z]{3,10}:/.exec(a)||[""])[0],s=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(a)||[""])[0],l=/^([^?]*)\??/.exec(i)[1],u=e.parentNode,p=new XMLHttpRequest;p.onreadystatechange=function(){4===p.readyState&&n()},n=function(){var t=p.responseText;if(t&&e.parentNode&&(!p.status||p.status<400||p.status>600)){if(t=r.fix(t,!0,e),a){t=t.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,r,t){return/^([a-z]{3,10}:|#)/i.test(t)?e:/^\/\//.test(t)?'url("'+o+t+'")':/^\//.test(t)?'url("'+s+t+'")':/^\?/.test(t)?'url("'+l+t+'")':'url("'+a+t+'")'});var n=a.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");t=t.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+n,"gi"),"$1")}var i=document.createElement("style");i.textContent=t,i.media=e.media,i.disabled=e.disabled,i.setAttribute("data-href",e.getAttribute("href")),u.insertBefore(i,e),u.removeChild(e),i.media=e.media}};try{p.open("GET",i),p.send(null)}catch(t){"undefined"!=typeof XDomainRequest&&(p=new XDomainRequest,p.onerror=p.onprogress=function(){},p.onload=n,p.open("GET",i),p.send(null))}e.setAttribute("data-inprogress","")},styleElement:function(e){if(!e.hasAttribute("data-noprefix")){var t=e.disabled;e.textContent=r.fix(e.textContent,!0,e),e.disabled=t}},styleAttribute:function(e){var t=e.getAttribute("style");t=r.fix(t,!1,e),e.setAttribute("style",t)},process:function(){e("style").forEach(StyleFix.styleElement),e("[style]").forEach(StyleFix.styleAttribute)},register:function(e,t){(r.fixers=r.fixers||[]).splice(void 0===t?r.fixers.length:t,0,e)},fix:function(e,t,n){for(var i=0;i-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi,function(e,r,t,n){return r+(t||"")+"linear-gradient("+(90-n)+"deg"})),e=r("functions","(\\s|:|,)","\\s*\\(","$1"+i+"$2(",e),e=r("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+i+"$2$3",e),e=r("properties","(^|\\{|\\s|;)","\\s*:","$1"+i+"$2:",e),t.properties.length){var a=RegExp("\\b("+t.properties.join("|")+")(?!:)","gi");e=r("valueProperties","\\b",":(.+?);",function(e){return e.replace(a,i+"$1")},e)}return n&&(e=r("selectors","","\\b",t.prefixSelector,e),e=r("atrules","@","\\b","@"+i+"$1",e)),e=e.replace(RegExp("-"+i,"g"),"-"),e=e.replace(/-\*-(?=[a-z]+)/gi,t.prefix)},property:function(e){return(t.properties.indexOf(e)?t.prefix:"")+e},value:function(e){return e=r("functions","(^|\\s|,)","\\s*\\(","$1"+t.prefix+"$2(",e),e=r("keywords","(^|\\s)","(\\s|$)","$1"+t.prefix+"$2$3",e)},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+t.prefix})},prefixProperty:function(e,r){var n=t.prefix+e;return r?StyleFix.camelCase(n):n}};!function(){var e={},r=[],n=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,a=function(t){if("-"===t.charAt(0)){r.push(t);var n=t.split("-"),i=n[1];for(e[i]=++e[i]||1;n.length>3;){n.pop();var a=n.join("-");o(a)&&-1===r.indexOf(a)&&r.push(a)}}},o=function(e){return StyleFix.camelCase(e)in i};if(n.length>0)for(var s=0;s
11 |
--------------------------------------------------------------------------------
/basic-tween/README.txt:
--------------------------------------------------------------------------------
1 | A Pen created at CodePen.io. You can find this one at http://codepen.io/sdras/pen/93aa4abc0248757c934882bf4dac3710.
2 |
3 |
--------------------------------------------------------------------------------
/basic-tween/config.rb:
--------------------------------------------------------------------------------
1 | # Require any additional compass plugins here.
2 |
3 | # Set this to the root of your project when deployed:
4 | http_path = "/"
5 | css_dir = "css"
6 | sass_dir = "scss"
7 | images_dir = "images"
8 | javascripts_dir = "js"
9 | fonts_dir = "fonts"
10 |
11 | output_style = :expanded
12 |
13 | # To enable relative paths to assets via compass helper functions. Uncomment:
14 | # relative_assets = true
15 |
16 | # To disable debugging comments that display the original location of your selectors. Uncomment:
17 | # line_comments = false
18 | color_output = false
19 |
20 |
21 | # If you prefer the indented syntax, you might want to regenerate this
22 | # project again passing --syntax sass, or you can uncomment this:
23 | # preferred_syntax = :sass
24 | # and then run:
25 | # sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass
26 |
--------------------------------------------------------------------------------
/basic-tween/css/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
2 |
--------------------------------------------------------------------------------
/basic-tween/css/style.css:
--------------------------------------------------------------------------------
1 | .squares {
2 | float: left;
3 | width: 40px;
4 | height: 40px;
5 | margin-left: 10px;
6 | background: #3f717c;
7 | }
8 |
9 | .scene {
10 | margin: 20px auto;
11 | display: table;
12 | }
13 |
--------------------------------------------------------------------------------
/basic-tween/index.haml:
--------------------------------------------------------------------------------
1 | .scene
2 | -(1..12).each do |i|
3 | .squares
--------------------------------------------------------------------------------
/basic-tween/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | A Pen by Sarah Drasner
6 |
7 |
8 |
9 |
10 |
11 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |