├── images └── light_download_link.pub ├── README.md ├── css ├── main.css.map ├── main.scss └── main.css └── index.html /images/light_download_link.pub: -------------------------------------------------------------------------------- 1 | https://www.iconfinder.com/icons/3098128/building_construction_hammer_paint_tool_tools_work_icon -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GSAP Animation Tutorial Project 2 | 3 | This is the project based on the following tutorial: 4 | [Getting Started with GSAP TweenMax (Tutorial) - Animating a Landing Page](https://youtu.be/eY4sXczY5AQ) 5 | 6 | ## More Awesome Content 7 | 8 | Do me a big ol' favor and check out these awesome links. I release new video tutorials on full stack development Monday-Thursday @ 10:30 AM ET! 9 | 10 | * Subscribe to the [DesignCourse YouTube Channel](http://youtube.com/designcourse) 11 | * Check out the associated website [Coursetro Full Stack Development Training](https://coursetro.com) 12 | * Chat with me and others on Discord: [DesignCourse Discord Server](https://discord.gg/a27CKAF) 13 | * [Twitter](https://twitter.com/designcoursecom) 14 | * [Facebook](https://facebook.com/coursetro) 15 | 16 | Enjoy! -------------------------------------------------------------------------------- /css/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,YAAY;EACzB,OAAO,EAAE,GAAG;CACf;;AAED,AAAA,EAAE,CAAC;EACC,SAAS,EAAE,GAAG;EACd,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,GAAG;CACnB;;AAED,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,eAAe;EACvB,WAAW,EAAE,YAAY;EACzB,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,KAAK;EAChB,OAAO,EAAE,QAAQ;EACjB,MAAM,EAAE,OAAO;CAClB;;AAED,AAAA,MAAM,CAAC;EACH,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;EACR,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,MAAM;EACf,SAAS,EAAE,SAAS;EACpB,gBAAgB,EAAE,MAAM;CA4B3B;;AArCD,AAWI,MAXE,CAWF,GAAG,CAAC;EACA,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,kBAAkB;CAChC;;AAjBL,AAmBI,MAnBE,CAmBF,CAAC,CAAC;EACE,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,CAAC;CACb;;AAvBL,AAyBI,MAzBE,CAyBF,IAAI,CAAC;EACD,MAAM,EAAE,mBAAmB;EAC3B,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,GAAG,EAAE,GAAG;EACR,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,QAAQ;CACtB", 4 | "sources": [ 5 | "main.scss" 6 | ], 7 | "names": [], 8 | "file": "main.css" 9 | } -------------------------------------------------------------------------------- /css/main.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Montserrat'; 3 | padding: 9em; 4 | } 5 | 6 | h1 { 7 | font-size: 5em; 8 | width: 25%; 9 | color: red; 10 | line-height: 1em; 11 | } 12 | 13 | button { 14 | background: none; 15 | border: 1px solid black; 16 | font-family: 'Montserrat'; 17 | font-weight: bold; 18 | font-size: 1.7em; 19 | padding: .5em 1em; 20 | cursor: pointer; 21 | } 22 | 23 | .panel { 24 | position: absolute; 25 | width: 55%; 26 | bottom: 0; 27 | right: 0; 28 | background: #EAEAEA; 29 | box-sizing: border-box; 30 | padding: 15% 7%; 31 | transform: scaleY(0); 32 | transform-origin: bottom; 33 | 34 | img { 35 | width: 120px; 36 | float: left; 37 | margin-right: 50px; 38 | opacity: 0; 39 | transform: translateY(-200px); 40 | } 41 | 42 | p { 43 | font-size: 1.9em; 44 | width: 80%; 45 | opacity: 0; 46 | } 47 | 48 | .box { 49 | border: 5px solid lightgray; 50 | width: 65%; 51 | height: 40%; 52 | position: absolute; 53 | left: -7%; 54 | top: 15%; 55 | z-index: -1; 56 | opacity: 0; 57 | transform: scale(0); 58 | } 59 | 60 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | GSAP 9 | 10 | 11 |

Engineering For Tomorrow

12 | 13 | 14 |
15 | 16 |

Some great line about engineering and how we did something everyone will love.

17 |
18 |
19 | 20 | 21 | 22 | 34 | 35 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Montserrat'; 3 | padding: 9em; 4 | } 5 | 6 | h1 { 7 | font-size: 5em; 8 | width: 25%; 9 | color: red; 10 | line-height: 1em; 11 | } 12 | 13 | button { 14 | background: none; 15 | border: 1px solid black; 16 | font-family: 'Montserrat'; 17 | font-weight: bold; 18 | font-size: 1.7em; 19 | padding: .5em 1em; 20 | cursor: pointer; 21 | } 22 | 23 | .panel { 24 | position: absolute; 25 | width: 55%; 26 | bottom: 0; 27 | right: 0; 28 | background: #EAEAEA; 29 | -webkit-box-sizing: border-box; 30 | box-sizing: border-box; 31 | padding: 15% 7%; 32 | -webkit-transform: scaleY(0); 33 | transform: scaleY(0); 34 | -webkit-transform-origin: bottom; 35 | transform-origin: bottom; 36 | } 37 | 38 | .panel img { 39 | width: 120px; 40 | float: left; 41 | margin-right: 50px; 42 | opacity: 0; 43 | -webkit-transform: translateY(-200px); 44 | transform: translateY(-200px); 45 | } 46 | 47 | .panel p { 48 | font-size: 1.9em; 49 | width: 80%; 50 | opacity: 0; 51 | } 52 | 53 | .panel .box { 54 | border: 5px solid lightgray; 55 | width: 65%; 56 | height: 40%; 57 | position: absolute; 58 | left: -7%; 59 | top: 15%; 60 | z-index: -1; 61 | opacity: 0; 62 | -webkit-transform: scale(0); 63 | transform: scale(0); 64 | } 65 | /*# sourceMappingURL=main.css.map */ --------------------------------------------------------------------------------