Skip to content

Commit 93de241

Browse files
author
daniel-lundin
committed
jQuery detection, minor API update, more documentation
1 parent ead6dae commit 93de241

10 files changed

+131
-54
lines changed

‎Gruntfile.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,18 @@ module.exports = function(grunt) {
77
options: {
88
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
99
},
10-
jquery: {
10+
dist: {
1111
src: 'src/*.js',
12-
dest: 'dist/jquery.snabbt.min.js'
13-
},
14-
standalone: {
15-
src: ['src/animations.js', 'src/easing.js', 'src/tween.js', 'src/main.js', 'src/mat.js', 'src/state.js', 'src/utils.js'],
1612
dest: 'dist/snabbt.min.js'
17-
}
13+
},
1814
},
1915
concat: {
2016
options: {
2117
separator: ';',
2218
},
23-
jquery: {
24-
src: 'src/*.js',
25-
dest: 'dist/jquery.snabbt.js',
26-
},
2719
dist: {
28-
src: ['src/animations.js', 'src/easing.js', 'src/tween.js', 'src/main.js', 'src/mat.js', 'src/state.js', 'src/utils.js'],
29-
dest: 'dist/snabbt.js'
20+
src: 'src/*.js',
21+
dest: 'dist/snabbt.js',
3022
},
3123
},
3224
});

‎dist/jquery.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.

‎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/css/custom.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,15 @@
99
text-align: center;
1010
}
1111
.hero h1 {
12+
display: inline-block;
1213
text-align: center;
1314
font-size: 6rem;
1415
margin-bottom: 0px;
1516
}
17+
.hero h1 span {
18+
display: inline-block;
19+
}
20+
1621
.hero p {
1722
text-align: center;
1823
font-style: italic;
@@ -21,6 +26,11 @@
2126
margin-right: 10px;
2227
}
2328

29+
.warning {
30+
text-align: center;
31+
color: red;
32+
}
33+
2434
.nav.docked {
2535
position: fixed;
2636
top: 0;
@@ -67,5 +77,5 @@ pre {
6777
}
6878

6979
section {
70-
padding-top: 5%;
80+
padding-top: 45px;
7181
}

‎docs/docs.js

Lines changed: 76 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,66 @@
1-
(function() {
1+
$(function() {
2+
3+
4+
5+
var title = $("h1").text();
6+
$("h1 span").each(function(idx, element) {
7+
var x = 20;
8+
var z = title.length/2 * x - Math.abs((title.length/2 - idx) * x);
9+
snabbt(element, {
10+
from_rotation: [0, 0, -8*Math.PI],
11+
//perspective: 70,
12+
delay: 1000 + idx * 100,
13+
duration: 1000,
14+
easing: 'cos',
15+
callback: function() {
16+
if(idx == title.length - 1) {
17+
$("h1").snabbt({
18+
rotation: [-Math.PI/4, 0, 0],
19+
perspective: 100,
20+
easing: 'sqrt',
21+
delay: 400,
22+
duration: 1000
23+
}).then({
24+
easing: 'spring',
25+
perspective: 100,
26+
spring_constant: 0.1,
27+
spring_deaccelaration: 0.99,
28+
spring_mass: 2,
29+
});
30+
}
31+
}
32+
});
33+
34+
});
35+
36+
// Title easter egg
37+
$("h1").on('click', function() {
38+
var w = $("h1").width();
39+
$("h1").snabbt({
40+
skew: [0, 0.9],
41+
easing: 'cos',
42+
}).then({
43+
position: [2*w, 0, 0],
44+
skew: [0, 0],
45+
easing: 'sqrt',
46+
duration: 200,
47+
}).then({
48+
offset: [w/2, 0, 0],
49+
rotation: [0, Math.PI, 0],
50+
from_position: [2*w - w/2, 0, 0],
51+
position: [2*w - w/2, 0, 0],
52+
perspective: 500,
53+
easing: 'cos',
54+
delay: 200,
55+
}).then({
56+
offset: [-w/2, 0, 0],
57+
from_rotation: [0, -Math.PI, 0],
58+
from_position: [w - w/2, 0, 0],
59+
position: [w - w/2, 0, 0],
60+
perspective: 500,
61+
easing: 'cos',
62+
});
63+
});
264

365
// Usage example
466
document.getElementById('usage-example-execute').onclick = function() {
@@ -20,24 +82,23 @@
2082
from_rotation: [0, 0, -2*Math.PI],
2183
easing: 'spring',
2284
spring_constant: 0.2,
23-
deaccelaration: 0.95,
85+
spring_deaccelaration: 0.95,
2486
});
2587
};
2688

2789

28-
$(function() {
29-
var navtop = $("#navbar").offset().top;
30-
var $docked_navbar = $("#docked-navbar");
31-
var $window = $(window);
32-
$(window).on('scroll', function(event) {
33-
if($window.scrollTop() > navtop) {
34-
if($docked_navbar.hasClass('hidden'))
35-
$("#docked-navbar").removeClass("hidden");
36-
} else {
37-
if(!$docked_navbar.hasClass('hidden'))
38-
$("#docked-navbar").addClass("hidden");
39-
}
40-
});
90+
// Scroll spy
91+
var navtop = $("#navbar").offset().top;
92+
var $docked_navbar = $("#docked-navbar");
93+
var $window = $(window);
94+
$(window).on('scroll', function(event) {
95+
if($window.scrollTop() > navtop) {
96+
if($docked_navbar.hasClass('hidden'))
97+
$("#docked-navbar").removeClass("hidden");
98+
} else {
99+
if(!$docked_navbar.hasClass('hidden'))
100+
$("#docked-navbar").addClass("hidden");
101+
}
41102
});
42103

43104
}());

‎docs/index.html

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,39 +25,40 @@
2525
<div id="docked-navbar" class="nav docked hidden">
2626
<div class="container">
2727
<ul>
28+
<li><a href="#intro">Introduction</a></li>
2829
<li><a href="#usage">Usage</a></li>
2930
<li><a href="#easing">Easing</a></li>
30-
<li><a href="#forcefeed">Forcefeeding</a></li>
3131
<li><a href="#advanced">Advanced</a></li>
3232
</ul>
3333
</div>
3434
</div>
3535

3636
<div class="container" style="margin-top: 10%">
3737
<div class="hero">
38-
<h1>snabbt.js</h1>
39-
<p>Fast, simple and lightweight animation engine in javascript</p>
38+
<h1><span>s</span><span>n</span><span>a</span><span>b</span><span>b</span><span>t</span><span>.</span><span>j</span><span>s</span></h1>
39+
<p>Fast, light and simple animation engine in javascript</p>
4040
<div class="row">
4141
<div class="four columns">
4242
<h3><i class="fa fa-rocket"></i>Fast</h3>
4343
<p>60 FPS without micro-optimizations</p>
4444
</div>
4545
<div class="four columns">
46-
<h3><i class="fa fa-paper-plane"></i>Lightweight</h3>
47-
<p>Only 3kb minified and gzipped</p>
46+
<h3><i class="fa fa-paper-plane"></i>Light</h3>
47+
<p> &lt; 4kb minified and gzipped</p>
4848
</div>
4949
<div class="four columns">
5050
<h3><i class="fa fa-user"></i>Simple</h3>
5151
<p>One single API-endpoint</p>
5252
</div>
5353
</div>
54-
<button class="button-primary">Download</button>
54+
<a href="https://raw.githubusercontent.com/daniel-lundin/snabbt.js/master/dist/snabbt.min.js" class="button button-primary">Download</a>
5555
</div>
56+
<p class="warning"><span class="label">Warning:</span> snabbt.js is under development, breaking changes could occur. But I would love some feedback</p>
5657
<div id="navbar" class="nav">
5758
<ul>
59+
<li><a href="#intro">Introduction</a></li>
5860
<li><a href="#usage">Usage</a></li>
5961
<li><a href="#easing">Easing</a></li>
60-
<li><a href="#forcefeed">Forcefeeding</a></li>
6162
<li><a href="#advanced">Advanced</a></li>
6263
</ul>
6364
</div>
@@ -133,14 +134,14 @@ <h3>Chaining</h3>
133134
from_rotation: [0, 0, -2*Math.PI],
134135
easing: 'spring',
135136
spring_constant: 0.2,
136-
deaccelaration: 0.95,
137+
spring_deaccelaration: 0.95,
137138
});</code></pre>
138139
</div>
139140

140141
</div>
141142

142143
<h3>jQuery</h3>
143-
<p>snabbt.js works with or without jQuery. If jQuery is loaded snabbt.js can loaded as a jQuery-plugin. When using snabbt.js with jQuery, the first parameter is the animation configuration:</p>
144+
<p>snabbt.js works with or without jQuery. If jQuery is detected snabbt.js will be loaded as a jQuery-plugin. When using snabbt.js with jQuery, the first parameter is the animation configuration:</p>
144145
<div class="row">
145146
<div class="six columns">
146147
<h5>With jQuery</h5>
@@ -173,16 +174,27 @@ <h2>Easing</h2>
173174
</ul>
174175
</section>
175176

176-
<section id="spring">
177-
<h2>Spring physics</h2>
178-
<p>When using spring physics, the <em>duration</em> parameter is not in effect. Instead the animation will progress until equirilibrum is reached.</p>
177+
<h3>Spring physics</h3>
178+
<p>When using spring physics, the <em>duration</em> parameter is not in effect. Instead the animation will progress until equirilibrum is reached. When easing is set to <em>spring</em> there are four additional parameters that can be set on the animation configuration:</p>
179+
<ul>
180+
<li><strong>spring_constant</strong> - The stiffness of the spring</li>
181+
<li><strong>spring_deaccelaration</strong> - Controls how fast the velocity decreases</li>
182+
<li><strong>spring_mass</strong> - The 'weight' of the object</li>
183+
</ul>
184+
</section>
185+
<section id="advanced">
186+
<h2>Advanced concepts</h2>
187+
<p>This section describes some of the more advanced usages.</p>
188+
189+
<h3>Value feeding</h3>
190+
<p>The animation object is very simple to work with but has it limitations. Sometimes you want to do the transforms in an other order.</p>
179191
</section>
180192
<footer>
181193
Made by Daniel Lundin
182194
</footer>
183195

184196
<script src="jquery-2.1.1.min.js"></script>
185-
<script src="jquery.snabbt.min.js"></script>
197+
<script src="snabbt.min.js"></script>
186198
<script src="docs.js"></script>
187199
</div>
188200
</body>

‎docs/jquery.snabbt.min.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎docs/snabbt.min.js

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

‎src/easing.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ snabbtjs.SpringEasing = function(options) {
4747
this.equilibrium_position = snabbtjs.option_or_default(options.equilibrium_position, 1);
4848
this.velocity = snabbtjs.option_or_default(options.initial_velocity, 0);
4949
this.spring_constant = snabbtjs.option_or_default(options.spring_constant, 0.8);
50-
this.deacceleration = snabbtjs.option_or_default(options.deacceleration, 0.9);
51-
this.mass = 10;
50+
this.deacceleration = snabbtjs.option_or_default(options.spring_deacceleration, 0.9);
51+
this.mass = snabbtjs.option_or_default(options.spring_mass, 10);
5252

5353
this.equilibrium = false;
5454
};

‎src/jquery.snabbt.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
(function ( $ ) {
2-
$.fn.snabbt = function(arg1, arg2) {
1+
if(window.jQuery) {
2+
(function ( $ ) {
3+
$.fn.snabbt = function(arg1, arg2) {
34

4-
return snabbt(this.get(), arg1, arg2);
5-
};
6-
}( jQuery ));
5+
return snabbt(this.get(), arg1, arg2);
6+
};
7+
}( jQuery ));
8+
}

0 commit comments

Comments
 (0)