Skip to content

Commit 4e46e95

Browse files
sdrassdras
committed
add in some starter files for students
1 parent 96fada5 commit 4e46e95

File tree

14 files changed

+331
-0
lines changed

14 files changed

+331
-0
lines changed

‎comparsion-css-sass-gsap/css/style.css

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
html {
2+
background: #333;
3+
}
4+
5+
.bar {
6+
margin: 20px;
7+
background: red;
8+
width: 40px;
9+
height: 20px;
10+
}
11+
12+
.css, .sass, .gsap {
13+
float: left;
14+
}
15+
16+
.css {
17+
margin-left: 40%;
18+
}
19+
20+
@-webkit-keyframes staggerFoo {
21+
to {
22+
background: orange;
23+
-webkit-transform: rotate(90deg);
24+
transform: rotate(90deg);
25+
}
26+
}
27+
28+
@keyframes staggerFoo {
29+
to {
30+
background: orange;
31+
-webkit-transform: rotate(90deg);
32+
transform: rotate(90deg);
33+
}
34+
}
35+
.css .bar:nth-child(1) {
36+
-webkit-animation: staggerFoo 1s 0.1s ease-out both;
37+
animation: staggerFoo 1s 0.1s ease-out both;
38+
}
39+
40+
.css .bar:nth-child(2) {
41+
-webkit-animation: staggerFoo 1s 0.2s ease-out both;
42+
animation: staggerFoo 1s 0.2s ease-out both;
43+
}
44+
45+
.css .bar:nth-child(3) {
46+
-webkit-animation: staggerFoo 1s 0.3s ease-out both;
47+
animation: staggerFoo 1s 0.3s ease-out both;
48+
}
49+
50+
.css .bar:nth-child(4) {
51+
-webkit-animation: staggerFoo 1s 0.4s ease-out both;
52+
animation: staggerFoo 1s 0.4s ease-out both;
53+
}
54+
55+
.css .bar:nth-child(5) {
56+
-webkit-animation: staggerFoo 1s 0.5s ease-out both;
57+
animation: staggerFoo 1s 0.5s ease-out both;
58+
}
59+
60+
.css .bar:nth-child(6) {
61+
-webkit-animation: staggerFoo 1s 0.5s ease-out both;
62+
animation: staggerFoo 1s 0.5s ease-out both;
63+
}
64+
65+
.sass .bar:nth-child(1) {
66+
-webkit-animation: staggerFoo 1s 1.1s ease-out both;
67+
animation: staggerFoo 1s 1.1s ease-out both;
68+
}
69+
70+
.sass .bar:nth-child(2) {
71+
-webkit-animation: staggerFoo 1s 1.2s ease-out both;
72+
animation: staggerFoo 1s 1.2s ease-out both;
73+
}
74+
75+
.sass .bar:nth-child(3) {
76+
-webkit-animation: staggerFoo 1s 1.3s ease-out both;
77+
animation: staggerFoo 1s 1.3s ease-out both;
78+
}
79+
80+
.sass .bar:nth-child(4) {
81+
-webkit-animation: staggerFoo 1s 1.4s ease-out both;
82+
animation: staggerFoo 1s 1.4s ease-out both;
83+
}
84+
85+
.sass .bar:nth-child(5) {
86+
-webkit-animation: staggerFoo 1s 1.5s ease-out both;
87+
animation: staggerFoo 1s 1.5s ease-out both;
88+
}
89+
90+
.sass .bar:nth-child(6) {
91+
-webkit-animation: staggerFoo 1s 1.6s ease-out both;
92+
animation: staggerFoo 1s 1.6s ease-out both;
93+
}
94+
95+
h2 {
96+
text-align: center;
97+
color: #666;
98+
}

‎comparsion-css-sass-gsap/index.haml

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.css
2+
%h2 CSS
3+
- @x = 5
4+
- @x.times do
5+
.bar
6+
7+
.sass
8+
%h2 SASS
9+
- @x = 5
10+
- @x.times do
11+
.bar
12+
13+
.gsap
14+
%h2 GSAP
15+
- @x = 5
16+
- @x.times do
17+
.bar

‎comparsion-css-sass-gsap/index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>A Pen by Sarah Drasner</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
8+
<link rel="stylesheet" href="css/style.css">
9+
</head>
10+
11+
<body>
12+
<div class='css'>
13+
<h2>CSS</h2>
14+
<div class='bar'></div>
15+
<div class='bar'></div>
16+
<div class='bar'></div>
17+
<div class='bar'></div>
18+
<div class='bar'></div>
19+
</div>
20+
<div class='sass'>
21+
<h2>SASS</h2>
22+
<div class='bar'></div>
23+
<div class='bar'></div>
24+
<div class='bar'></div>
25+
<div class='bar'></div>
26+
<div class='bar'></div>
27+
</div>
28+
<div class='gsap'>
29+
<h2>GSAP</h2>
30+
<div class='bar'></div>
31+
<div class='bar'></div>
32+
<div class='bar'></div>
33+
<div class='bar'></div>
34+
<div class='bar'></div>
35+
</div>
36+
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
37+
<script src="js/index.js"></script>
38+
</body>
39+
40+
</html>

‎comparsion-css-sass-gsap/js/index.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎comparsion-css-sass-gsap/scss/style.scss

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
html {
2+
background: #333;
3+
}
4+
5+
.bar {
6+
margin: 20px;
7+
background: red;
8+
width: 40px;
9+
height: 20px;
10+
}
11+
12+
.css, .sass, .gsap {
13+
float: left;
14+
}
15+
16+
.css {
17+
margin-left: 40%;
18+
}
19+
20+
@keyframes staggerFoo {
21+
to {
22+
background: orange;
23+
transform: rotate(90deg);
24+
}
25+
}
26+
27+
.css .bar:nth-child(1) { animation: staggerFoo 1s 0.1s ease-out both; }
28+
.css .bar:nth-child(2) { animation: staggerFoo 1s 0.2s ease-out both; }
29+
.css .bar:nth-child(3) { animation: staggerFoo 1s 0.3s ease-out both; }
30+
.css .bar:nth-child(4) { animation: staggerFoo 1s 0.4s ease-out both; }
31+
.css .bar:nth-child(5) { animation: staggerFoo 1s 0.5s ease-out both; }
32+
.css .bar:nth-child(6) { animation: staggerFoo 1s 0.5s ease-out both; }
33+
34+
@for $i from 1 through 6 {
35+
.sass .bar:nth-child(#{$i} ) {
36+
animation: staggerFoo 1s 1+($i * 0.1s) ease-out both;
37+
}
38+
}
39+
40+
h2 {
41+
text-align: center;
42+
color: #666;
43+
}
44+

‎gsap-basic-timeline.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
//set properties needed for animation
2+
TweenMax.set(".element", {
3+
perspective: 400
4+
});
5+
6+
// the first scene
7+
function sceneOne() {
8+
var tl = new TimelineMax();
9+
10+
tl.add("label");
11+
//animation for element on timeline
12+
tl.to(".other-element", 1, {property: value}, "label");
13+
//stagger needs the 0.2, which tells the elements how long to wait between each next fire
14+
tl.staggerTo(".next-element li", 1, {property: value}, 0.2, "label+=1");
15+
16+
//make the timeline go a little bit faster
17+
tl.timeScale(1.2);
18+
19+
return tl;
20+
}
21+
22+
// Create a master timeline
23+
var master = new TimelineMax({options});
24+
// Add the scene function to the master
25+
master.add(sceneOne(), "labelOnMaster");
26+
27+
//use this while you're working to get to a place in time
28+
//master.seek("labelOnMaster+=2");e

‎gsap-simple-tween/css/style.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
div {
2+
width: 40px;
3+
height: 40px;
4+
background: teal;
5+
margin: 0 auto;
6+
transform: translate(0, 10px);
7+
}

‎gsap-simple-tween/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>A Pen by Sarah Drasner</title>
7+
<link rel="stylesheet" href="css/style.css">
8+
</head>
9+
10+
<body>
11+
<div></div>
12+
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
13+
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script>
14+
<script src="js/index.js"></script>
15+
</body>
16+
17+
</html>

‎gsap-simple-tween/js/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TweenLite.to("div", 2, {scaleY:0.75, scaleX:1.25, y:100, opacity:0.75, ease:Elastic.easeOut});

‎gsap-two-tweens/css/style.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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+
}

‎gsap-two-tweens/index.haml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.scene
2+
-(1..12).each do |i|
3+
.squares

‎gsap-two-tweens/index.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>A Pen by Sarah Drasner</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
8+
<style>
9+
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
10+
11+
.squares {
12+
float: left;
13+
width: 40px;
14+
height: 40px;
15+
margin-left: 10px;
16+
background: #3f717c;
17+
}
18+
19+
.scene {
20+
margin: 20px auto;
21+
display: table;
22+
}
23+
</style>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
25+
</head>
26+
27+
<body>
28+
<div class='scene'>
29+
<div class='squares'></div>
30+
<div class='squares'></div>
31+
<div class='squares'></div>
32+
<div class='squares'></div>
33+
<div class='squares'></div>
34+
<div class='squares'></div>
35+
<div class='squares'></div>
36+
<div class='squares'></div>
37+
<div class='squares'></div>
38+
<div class='squares'></div>
39+
<div class='squares'></div>
40+
<div class='squares'></div>
41+
</div>
42+
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
43+
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script>
44+
<script src="js/index.js"></script>
45+
</body>
46+
47+
</html>

‎gsap-two-tweens/js/index.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gsap-two-tweens/scss/style.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
$i : 40px;
2+
3+
.squares {
4+
float: left;
5+
width: $i;
6+
height: $i;
7+
margin-left: $i/4;
8+
background: #3f717c;
9+
}
10+
11+
.scene {
12+
margin: $i/2 auto;
13+
display: table;
14+
}

0 commit comments

Comments
 (0)