Skip to content

Commit 2e318d9

Browse files
author
daniel-lundin
committed
Update docs, rename easings, add custom easing functions
1 parent 8f4ba83 commit 2e318d9

File tree

11 files changed

+309
-177
lines changed

11 files changed

+309
-177
lines changed

‎dist/snabbt.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/cards.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ function build_formation(positions) {
9292
from_rotation: positions[i].from_rotation,
9393
position: positions[i].position,
9494
rotation: positions[i].rotation,
95-
easing: 'cos',
95+
easing: 'ease',
9696
delay: i * 50
9797
});
9898
}

‎docs/css/custom.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,33 @@ footer {
100100
padding-top: 10px;
101101
}
102102

103+
.easing-demo {
104+
position: relative;
105+
height: 20px;
106+
border: 1px solid grey;
107+
border-radius: 4px;
108+
box-sizing: border-box;
109+
}
110+
.easing-demo div {
111+
position: absolute;
112+
width: 20px;
113+
height: 20px;
114+
border-radius: 4px;
115+
background: rgb(30, 174, 219);
116+
}
103117
/* Some utiliy classes */
104118
@media screen and (max-width:600px) {
105119
.hide-mobile {
106120
display: none;
107121
}
108122
}
109123

124+
@media screen and (min-width:600px) {
125+
.hide-desktop {
126+
display: none;
127+
}
128+
}
129+
110130
.extra-top-margin {
111131
margin-top: 20px;
112132
}

‎docs/docs.js

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
$(function() {
22

3-
4-
53
var title = $("h1").text();
4+
var title_height = $("h1").height();
5+
66
$("h1 span").each(function(idx, element) {
77
var x = 20;
88
var z = title.length/2 * x - Math.abs((title.length/2 - idx) * x);
@@ -11,16 +11,22 @@ $(function() {
1111
//perspective: 70,
1212
delay: 1000 + idx * 100,
1313
duration: 1000,
14-
easing: 'cos',
14+
easing: 'ease',
1515
callback: function() {
1616
if(idx == title.length - 1) {
1717
$("h1").snabbt({
18+
offset: [0, -title_height, 0],
19+
from_position: [0, title_height, 0],
20+
position: [0, title_height, 0],
1821
rotation: [-Math.PI/4, 0, 0],
1922
perspective: 100,
20-
easing: 'sqrt',
23+
easing: 'linear',
2124
delay: 400,
2225
duration: 1000
2326
}).then({
27+
offset: [0, -title_height, 0],
28+
from_position: [0, title_height, 0],
29+
position: [0, title_height, 0],
2430
easing: 'spring',
2531
perspective: 100,
2632
spring_constant: 0.1,
@@ -38,27 +44,27 @@ $(function() {
3844
var w = $("h1").width();
3945
$("h1").snabbt({
4046
skew: [0, 0.9],
41-
easing: 'cos',
47+
easing: 'ease',
4248
}).then({
4349
position: [2*w, 0, 0],
4450
skew: [0, 0],
45-
easing: 'sqrt',
51+
easing: 'ease-in',
4652
duration: 200,
4753
}).then({
4854
offset: [w/2, 0, 0],
4955
rotation: [0, Math.PI, 0],
5056
from_position: [2*w - w/2, 0, 0],
5157
position: [2*w - w/2, 0, 0],
5258
perspective: 500,
53-
easing: 'cos',
59+
easing: 'ease',
5460
delay: 200,
5561
}).then({
5662
offset: [-w/2, 0, 0],
5763
from_rotation: [0, -Math.PI, 0],
5864
from_position: [w - w/2, 0, 0],
5965
position: [w - w/2, 0, 0],
6066
perspective: 500,
61-
easing: 'cos',
67+
easing: 'ease',
6268
});
6369
});
6470

@@ -69,15 +75,15 @@ $(function() {
6975
rotation: [0, 0, Math.PI],
7076
duration: 1000,
7177
delay: 100,
72-
easing: 'cos'
78+
easing: 'ease'
7379
});
7480
};
7581

7682
// Chaining example
7783
document.getElementById('chaining-example-execute').onclick = function() {
7884
snabbt(document.getElementById('chaining-example-execute'), {
7985
position: [100, 0, 0],
80-
easing: 'cos'
86+
easing: 'ease'
8187
}).then({
8288
from_rotation: [0, 0, -2*Math.PI],
8389
easing: 'spring',
@@ -87,13 +93,56 @@ $(function() {
8793
};
8894

8995

96+
// Easings
97+
var easing_demos = document.querySelectorAll('.easing-demo');
98+
for(var i=0;i<easing_demos.length;++i) {
99+
var container = easing_demos[i];
100+
var easing_name = container.attributes['data-easing-name'];
101+
var element = container.children[0];
102+
container.onclick = function(container, element, easing_name) {
103+
var container_width = container.offsetWidth;
104+
var element_width = element.offsetWidth;
105+
snabbt(element, 'stop');
106+
snabbt(element, {
107+
position: [container_width - element_width, 0, 0],
108+
easing: easing_name.value,
109+
duration: 500
110+
});
111+
}.bind(undefined, container, element, easing_name);
112+
}
113+
114+
// Spring easings
115+
$("#spring-example").on('click', function() {
116+
$("#spring-example").snabbt({
117+
position: [100, 0, 0],
118+
rotation: [0, 0, 2*Math.PI],
119+
easing: 'spring',
120+
spring_constant: 0.3,
121+
spring_deacceleration: 0.8,
122+
}).then({
123+
from_rotation: [0, 0, 0],
124+
easing: 'spring',
125+
spring_constant: 0.3,
126+
spring_deacceleration: 0.8,
127+
});
128+
});
129+
130+
// Custom easing
131+
$("#custom-easer").on('click', function() {
132+
$("#custom-easer").snabbt({
133+
position: [200, 0, 0],
134+
easing: function(value) {
135+
return Math.sin(Math.PI * value);
136+
}
137+
});
138+
});
139+
90140
// Value feed example
91141
$("#value-feed-example").on('click', function() {
92142
$("#value-feed-example").snabbt({
93143
value_feeder: function(i) {
94-
var y = 50*Math.sin(i*4*Math.PI);
95144
var x = Math.sin(i*Math.PI);
96-
return snabbtjs.mult(snabbtjs.scale(1+x, 1+x), snabbtjs.trans(x*400, y, 0));
145+
return snabbtjs.mult(snabbtjs.rotZ(Math.sin(6*i*Math.PI)), snabbtjs.trans(x*200, 0, 0));
97146
},
98147
duration: 1000,
99148
});

0 commit comments

Comments
 (0)