-
Notifications
You must be signed in to change notification settings - Fork 0
/
post.html
496 lines (495 loc) · 61.2 KB
/
post.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
<html op="item"><head><meta name="referrer" content="origin"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="news.css?XUlT833JlM9rhP2gUDw6">
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript">
function hide(id) {
var el = document.getElementById(id);
if (el) { el.style.visibility = 'hidden'; }
}
function vote(node) {
var v = node.id.split(/_/);
var item = v[1];
hide('up_' + item);
hide('down_' + item);
var ping = new Image();
ping.src = node.href;
return false;
}
</script><title>Show HN: Velocity.js – Accelerated JavaScript animation | Hacker News</title></head><body><center><table id="hnmain" border="0" cellpadding="0" cellspacing="0" width="85%" bgcolor="#f6f6ef">
<tr><td bgcolor="#ff6600"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:2px"><tr><td style="width:18px;padding-right:4px"><a href="http://www.ycombinator.com"><img src="y18.gif" width="18" height="18" style="border:1px white solid;"></a></td>
<td style="line-height:12pt; height:10px;"><span class="pagetop"><b class="brandname"><a href="news">Hacker News</a></b>
<a href="newest">new</a> | <a href="newcomments">comments</a> | <a href="show">show</a> | <a href="ask">ask</a> | <a href="jobs">jobs</a> | <a href="submit">submit</a> </span></td><td style="text-align:right;padding-right:4px;"><span class="pagetop">
<a href="login?goto=item%3Fid%3D7663775">login</a>
</span></td>
</tr></table></td></tr>
<tr style="height:10px"></tr><tr><td><table border="0">
<tr class='athing'>
<td align="right" valign="top" class="title"><span class="rank"></span></td> <td valign="top" class="votelinks"><center><a id="up_7663775" href="vote?for=7663775&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="title"><span class="deadmark"></span><a href="http://VelocityJS.org">Show HN: Velocity.js – Accelerated JavaScript animation</a><span class="sitebit comhead"> (<a href="from?site=velocityjs.org"><span class="sitestr">velocityjs.org</span></a>)</span></td></tr><tr><td colspan="2"></td><td class="subtext">
<span class="score" id="score_7663775">160 points</span> by <a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7663775">680 days ago</a></span> | <a href="https://hn.algolia.com/?query=Show%20HN%3A%20Velocity.js%20%E2%80%93%20Accelerated%20JavaScript%20animation&sort=byDate&dateRange=all&type=story&storyText=false&prefix&page=0">past</a> | <a href="https://www.google.com/search?q=Show%20HN%3A%20Velocity.js%20%E2%80%93%20Accelerated%20JavaScript%20animation">web</a> | <a href="item?id=7663775">49 comments</a> </td></tr>
</table><br><br>
<table border="0" class='comment-tree'> <tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664290" href="vote?for=7664290&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=jnbiche">jnbiche</a> <span class="age"><a href="item?id=7664290">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">It depresses me to no end that even with impressive engineering advances like this, any modestly graphical intensive app on the browser redlines my dual-core Intel laptop.<p>Similar graphics effects in QT or other native technologies not only do not redline my laptop, <i>they don't even raise the core temperature a single degree</i>.<p>I get enthusiastic about cool JS technologies just like most devs, but I feel like we're moving backwards.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664680" href="vote?for=7664680&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=hughes">hughes</a> <span class="age"><a href="item?id=7664680">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">How can you not get excited about this? It's 2014 and we've finally gained the technology to animate <i>one hundred and fifty</i> moving dots on the screen! At the same time!<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664307" href="vote?for=7664307&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7664307">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">I agree. The issue is the DOM. (For contrast, I've seen highly performant 3D worlds rendered in the browser via WebGL that don't bring my computer to its knees.)<p>We've been layering on years of HTML/JS additions that aren't allowed to break backwards compatibility. (Google's Blink project is one example of an effort to try to undo some of this.)<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7666316" href="vote?for=7666316&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=olegkikin">olegkikin</a> <span class="age"><a href="item?id=7666316">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">It's because both jQuery and Velocity suck at animation. DOM is not designed for fast animation. Use the right tools, like WebGL, and your can have thousands of sprites animated simultaneously at 60fps.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks"><center><a id="up_7666729" href="vote?for=7666729&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=jnbiche">jnbiche</a> <span class="age"><a href="item?id=7666729">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">So to get decent graphics performance on the Web you now have to program in OpenGL? How many "web developers" can write OpenGL?<p>On a related note, if you create your whole app in WebGL, you then lose all the benefits that HTML/JS/CSS brings, like simple user input.<p>Finally, WebGL is not even available to the general public yet. As far as I know, it's still behind feature flags on almost all browsers.<p>Have any major browsers removed the WebGL feature flag? If so, it's very recent.<p>WebGL is very cool, but it's still depressing that web devs have to program in GL to get decent graphics performance.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks"><center><a id="up_7667086" href="vote?for=7667086&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=jdc0589">jdc0589</a> <span class="age"><a href="item?id=7667086">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">The thing is, a web developer will almost never really need graphics intensive stuff that would see a huge performance boost from WebGL. It is definitely a problem, but it is just nowhere near as big of an issue as things like javascript + dom standards compliance.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7665808" href="vote?for=7665808&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=TeeWEE">TeeWEE</a> <span class="age"><a href="item?id=7665808">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Dont forget that CSS based animation is a declarative based animation framework while Velocity.js is using imperative code to animate (while the calls look declarative, the code in the framework has to be bundled with your js).<p>The advantage of the declarative approach, is that browser can improve the CSS animations in every browser update. Also, in theory, browsers could improve CSS animation in such a way that is is always faster than velocity.js.<p>You could for example make a CSS-animation to velocity.js compiler. Browser do this compilation (not to velicity.js but to native code/operations) already. Thats why it surprises me that velocity.js is saying its faster than pure CSS animations.<p>Can somebody enlighten me on why this is the case?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7667963" href="vote?for=7667963&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7667963">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Yep, I authored an article on CSS vs. JavaScript performance here: <a href="http://davidwalsh.name/css-js-animation" rel="nofollow">http://davidwalsh.name/css-js-animation</a><span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664337" href="vote?for=7664337&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=nkozyra">nkozyra</a> <span class="age"><a href="item?id=7664337">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Wonderful.<p>This is one of those things that dogs me as a developer - accepting things <i>as they are</i>. It's something we should all look out for.<p>If you've ever just tacitly, passively accepted something as potable if not ideal, you need to develop an internal "Complacency Alert" alarm. I know I do. For too long I've accepted that you either have to reinvent the wheel with javascript animations or accept what jQuery has to offer.<p>Hats off here.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664651" href="vote?for=7664651&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=25cf">25cf</a> <span class="age"><a href="item?id=7664651">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c73">> accepting things as they are<p>really? as opposed to innovating?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks"><center><a id="up_7665989" href="vote?for=7665989&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=nkozyra">nkozyra</a> <span class="age"><a href="item?id=7665989">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Are you attempting to do a Cliff's notes of my comment?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664406" href="vote?for=7664406&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=isaacdl">isaacdl</a> <span class="age"><a href="item?id=7664406">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">I'm really impressed by the level of documentation in the code[0]. Makes it fun to read.<p>[0]<a href="https://github.com/julianshapiro/velocity/blob/master/jquery.velocity.js" rel="nofollow">https://github.com/julianshapiro/velocity/blob/master/jquery...</a><span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664586" href="vote?for=7664586&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=caipre">caipre</a> <span class="age"><a href="item?id=7664586">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Well documented sure, but man are there some long lines in there. I get that 80 char width can be a bit limiting, but several of those are 200+.<p>Still, I'll take the documentation. :)<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks"><center><a id="up_7665419" href="vote?for=7665419&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=dsego">dsego</a> <span class="age"><a href="item?id=7665419">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c5a">2000 lines of code in one file is too much, should be broken into 4-5 files at least.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7663946" href="vote?for=7663946&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=slajax">slajax</a> <span class="age"><a href="item?id=7663946">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">We had Julian come by and demo this to our team a few weeks back. Totally awesome work he's doing here. Great job Julian.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664032" href="vote?for=7664032&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=tambourine_man">tambourine_man</a> <span class="age"><a href="item?id=7664032">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">This blew me away.
Never thought JS animations could be faster than CSS.<p>I'll use it in my next project.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664118" href="vote?for=7664118&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=nevir">nevir</a> <span class="age"><a href="item?id=7664118">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Shouldn't your comparison widget also have a pure CSS option?<p>Maybe I'm missing something, but I'm not seeing anything to back up the claims that this is more performant than pure CSS animations?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664126" href="vote?for=7664126&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7664126">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Transit doesn't incur much overhead: <a href="https://github.com/rstacruz/jquery.transit/blob/master/jquery.transit.js" rel="nofollow">https://github.com/rstacruz/jquery.transit/blob/master/jquer...</a><p>Either way, there'd need to be some sort of chaining implementation for the sake of the demo -- and at that point you might as well be using Transit.<p>As for performance vs. CSS transitions, try out the Performance Comparison #1. Select Transit as the engine and run it at high element counts. It chokes pretty quickly. These effects tend to be exacerbated on mobile.<p>I'll note that Velocity also combines features from jQuery, jQuery UI, and transitions -- so it's a feature play as well as a performance play.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664843" href="vote?for=7664843&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=dcsan">dcsan</a> <span class="age"><a href="item?id=7664843">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">how does performance compare with famo.us? they're also css haters, to quote<p>> “We saw Javascript could do a raw game rendering engine, but we found a way to render an app and pass that render to the GPU, skipping all the things that we were waiting on the browser companies to fix. We found a way to bypass it by having a direct mathematical conversation with the GPU.”<p>IMHO famo.us seems more oriented toward taking over the whole app and providing a view-level API, where velocity is more for animating page DOM elements? For some basic things like delay: the velocity API [1] seems a lot simpler than the equiv [2] with famo.us, whereas famous has things like a "Grid" or ScrollView out of the box.<p>[1] <a href="http://julian.com/research/velocity/#delay" rel="nofollow">http://julian.com/research/velocity/#delay</a>
[2] <a href="http://stackoverflow.com/questions/23330771/how-to-add-a-delay-to-a-famous-transition" rel="nofollow">http://stackoverflow.com/questions/23330771/how-to-add-a-del...</a><span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664853" href="vote?for=7664853&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7664853">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Exactly right -- Velocity is a jQuery plugin and jQuery UI/CSS transitions replacement whereas Famo.us is a full-fledged app framework built around a physics engine.<p>As for a performance comparison, their demos have crashed my phone. So I have no idea. Looks like they've also pulled their demos link for now: <a href="http://famo.us" rel="nofollow">http://famo.us</a>. It's a pretty awesome concept though. I hope they succeed.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7666124" href="vote?for=7666124&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=spyder">spyder</a> <span class="age"><a href="item?id=7666124">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">> they're also css haters<p>They (Famo.us) cannot hate CSS too much because they use CSS transforms to do their animations.<p><a href="http://www.infoworld.com/t/web-applications/fast-and-flashy-famous-javascript-framework-revealed-232046" rel="nofollow">http://www.infoworld.com/t/web-applications/fast-and-flashy-...</a><span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664047" href="vote?for=7664047&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=voltagex_">voltagex_</a> <span class="age"><a href="item?id=7664047">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Congratulations:<p><pre><code> Content Blocked (content_filter_denied)
Content Category: "Suspicious"
</code></pre>
Any idea why? (I'm fairly sure my organisation doesn't curate the blocklist, only purchases it)<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664743" href="vote?for=7664743&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7664743">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Thanks for the heads up. Julian.com is currently hosted on GoDaddy -- so nothing would surprise me :) Switching to AWS later in the week.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7669887" href="vote?for=7669887&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=flockonus">flockonus</a> <span class="age"><a href="item?id=7669887">679 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">I wonder if other people also see the jitters in this demo when the box is returning to left?
<a href="http://cdpn.io/pLAxF" rel="nofollow">http://cdpn.io/pLAxF</a> (click the red box)<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7663941" href="vote?for=7663941&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=daemonk">daemonk</a> <span class="age"><a href="item?id=7663941">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">JQuery should just implement velocty.js' animation functions?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7663948" href="vote?for=7663948&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7663948">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">I so thoroughly circumvented their CSS and animation codepaths that they would have to house a lot of redundant code to incorporate Velocity.<p>But a boy can still dream :-D<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7666713" href="vote?for=7666713&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=kylebrown">kylebrown</a> <span class="age"><a href="item?id=7666713">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Can I just get a link to the demo please? There's no reason I should have to watch a youtube video in order to see a javascript demo.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7667011" href="vote?for=7667011&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=Flenser">Flenser</a> <span class="age"><a href="item?id=7667011">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">It's the link right after the link to the youtube video:
<a href="http://julian.com/research/velocity/demo.html" rel="nofollow">http://julian.com/research/velocity/demo.html</a><span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7671790" href="vote?for=7671790&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=ArtDev">ArtDev</a> <span class="age"><a href="item?id=7671790">679 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">I am definitely going to use it on my next project that needs any animation at all.
Nice work.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7667606" href="vote?for=7667606&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=leo_mck">leo_mck</a> <span class="age"><a href="item?id=7667606">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Should the 3D demo work on IE11? It started fine but then broke, on desktop and wp8.1.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7666571" href="vote?for=7666571&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=macca321">macca321</a> <span class="age"><a href="item?id=7666571">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Any reason you can't just overwrite .animate and have existing code use it?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7667970" href="vote?for=7667970&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7667970">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">It's generally considered bad practice to overwrite existing functions that other code relies on -- you can never be sure that your replacement is 100% compatible.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7663933" href="vote?for=7663933&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=leeoniya">leeoniya</a> <span class="age"><a href="item?id=7663933">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">any thoughts on how it compares to the CSS transitions polyfill [1], speedwise?<p>[1] <a href="https://github.com/rstacruz/jquery.transit" rel="nofollow">https://github.com/rstacruz/jquery.transit</a><span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7663939" href="vote?for=7663939&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7663939">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">I provide a direct comparison against Transit in the top-right corner of the documentation.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks"><center><a id="up_7663950" href="vote?for=7663950&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=leeoniya">leeoniya</a> <span class="age"><a href="item?id=7663950">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">ah sorry, missed that. Transit is much smaller though if you dont need all the features or extremely high perf.<p>EDIT: looks like Transit introduces hz tearing in perf demo, might be a bug in lib or demo?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks"><center><a id="up_7663969" href="vote?for=7663969&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7663969">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Yep, Transit is super small. Velocity still gets quite small though -- about 7Kb when zipped.<p>As for Transit's tearing and banding at high element counts -- that is indeed the performance bottleneck of CSS transitions shining through. If you're interested, you can learn the technical reasons behind Velocity's speed increase over CSS and jQuery here: <a href="http://davidwalsh.name/css-js-animation" rel="nofollow">http://davidwalsh.name/css-js-animation</a><span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="160"></td><td valign="top" class="votelinks"><center><a id="up_7664085" href="vote?for=7664085&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=leeoniya">leeoniya</a> <span class="age"><a href="item?id=7664085">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">nice. i never understood why jquery never adopted RAF. back compat prolly with their apis.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7665580" href="vote?for=7665580&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=oe">oe</a> <span class="age"><a href="item?id=7665580">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">The playground seems broken (stuck on "Let's play...")<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7665620" href="vote?for=7665620&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=unklefolk">unklefolk</a> <span class="age"><a href="item?id=7665620">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">You need to click on "Let's play..." for it to start.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks"><center><a id="up_7665880" href="vote?for=7665880&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=rhythmvs">rhythmvs</a> <span class="age"><a href="item?id=7665880">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Interesting. I wonder if the ellipsis (…) changes how that wording is being interpreted by the user. Maybe we’ve been accustomed to the idea that … indicates an action is being performed by the application (Loading… — We need to wait.), whereas ! expects us to perform an action (Let’s play! – The app is waiting.) The UX of punctuation…<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7663988" href="vote?for=7663988&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=lightblade">lightblade</a> <span class="age"><a href="item?id=7663988">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Thanks for proving what I long suspected.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664324" href="vote?for=7664324&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=itistoday2">itistoday2</a> <span class="age"><a href="item?id=7664324">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Nice, how does this compare with Greensock's performance? Is it better, or about the same?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664610" href="vote?for=7664610&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=morenoh149">morenoh149</a> <span class="age"><a href="item?id=7664610">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">it says in the upper right hand corner. It out performs green sock on higher workloads.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks"><center><a id="up_7665358" href="vote?for=7665358&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=bunkat">bunkat</a> <span class="age"><a href="item?id=7665358">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">One of the nice things about green sock is that it doesn't have any dependencies. That is more important to me than a little bit more performance (since green sock is already pretty fast).<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="120"></td><td valign="top" class="votelinks"><center><a id="up_7665376" href="vote?for=7665376&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7665376">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">GSAP is awesome. They proved to me that Velocity was a worthwhile pursuit.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="0"></td><td valign="top" class="votelinks"><center><a id="up_7664023" href="vote?for=7664023&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=goldenkey">goldenkey</a> <span class="age"><a href="item?id=7664023">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="cbe"><p><pre><code> "Because transitions aren't natively controlled by JavaScript (they are merely triggered by JavaScript), the browser does not know how to optimize transitions in sync with the JavaScript code that manipulates them."
</code></pre>
The above voodoo talk is quite a disservice. It's immediately obvious that the dev does not know how v8 and the dom/CSS/rendering engine are tied together. The fact that the CSS transition is triggered by JS has no bearing on speed or optimization.<p>Secondly, most importantly, JS based fps-style animations eat CPU, and battery power of portable devices. On the other hand, CSS transitions are only getting better. Most CSS transitions are GPU optimized and light on CPU usage. A web page should not be strangling the v8 engine for graphical animation that could instead be GPU-bound. This library is clever but a step in the wrong direction. The dev could have contributed to WebKit CSS key frame animation acceleration instead.<p>Thirdly, JS animations cannot handle the sheer amount of particles that CSS transitions can. For instance, take Ana Tudors box-shadow particle hack, and look at how performing it is through GPU acceleration.<p><a href="http://codepen.io/thebabydino/pen/shtGe" rel="nofollow">http://codepen.io/thebabydino/pen/shtGe</a><span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664034" href="vote?for=7664034&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=purpleturtle">purpleturtle</a> <span class="age"><a href="item?id=7664034">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">You misread my quote entirely.<p>If you read further down the article you're referencing (davidwalsh.name/css-js-animation), you'll see an example of how Velocity caches values between consecutively chained calls. THAT is an example of the browser not knowing when to optimize transitions in sync with JS code. Another example from that same article: Caching unit conversion ratios (e.g. px to %, em, etc.) across sibling elements in the same call.<p>Further, JS animation does not eat up mobile devices. You're conflating concepts.<p>I know that HN can be a stomping grounds, but there's no need to be rude.<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="80"></td><td valign="top" class="votelinks"><center><a id="up_7664075" href="vote?for=7664075&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=goldenkey">goldenkey</a> <span class="age"><a href="item?id=7664075">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="cae">Caching values is an obvious and necessary optimization.<p>The claim that the CSS transition cannot know when the property changes due to JS, therefore cannot optimize, is total fluffery. The main loop is render, JS, and never at the same time. That is why a JS loop will freeze the browser. Have you no idea that it's all single threaded?<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
<tr class='athing'><td><table border="0"> <tr><td class='ind'><img src="s.gif" height="1" width="40"></td><td valign="top" class="votelinks"><center><a id="up_7664311" href="vote?for=7664311&dir=up&goto=item%3Fid%3D7663775"><div class="votearrow" title="upvote"></div></a></center></td><td class="default"><div style="margin-top:2px; margin-bottom:-10px;"><span class="comhead">
<a href="user?id=neilk">neilk</a> <span class="age"><a href="item?id=7664311">680 days ago</a></span> <span class="par"></span><span class="deadmark"></span> <span class='storyon'></span>
</span></div><br><span class="comment">
<span class="c00">Theoretical objections aside, I have seen preview demos of Velocity on mobile devices, and it is surprisingly quick compared to its competitors. Even with demos involving many, many, particles.<p>I haven't delved deeply into all the tradeoffs - maybe it will overuse the CPU - but there's definitely something going on here.<p>There's a similar library called GSAP (<a href="http://www.greensock.com/gsap-js/" rel="nofollow">http://www.greensock.com/gsap-js/</a>) and they've made similar points (<a href="http://css-tricks.com/myth-busting-css-animations-vs-javascript/" rel="nofollow">http://css-tricks.com/myth-busting-css-animations-vs-javascr...</a>).<span>
</span><div class='reply'> <p><font size="1">
<font color="#f6f6ef">-----</font>
</font>
</div></td></tr>
</table></td></tr>
</table><br><br>
</td></tr>
<tr><td><img src="s.gif" height="10" width="0"><table width="100%" cellspacing="0" cellpadding="1"><tr><td bgcolor="#ff6600"></td></tr></table><br><center><a href="https://www.ycombinator.com/apply/">
Applications are open for YC Summer 2016
</a></center><br><center><span class="yclinks"><a href="newsguidelines.html">Guidelines</a>
| <a href="newsfaq.html">FAQ</a>
| <a href="mailto:hn@ycombinator.com">Support</a>
| <a href="https://github.com/HackerNews/API">API</a>
| <a href="security.html">Security</a>
| <a href="lists">Lists</a>
| <a href="bookmarklet.html">Bookmarklet</a>
| <a href="dmca.html">DMCA</a>
| <a href="http://www.ycombinator.com/apply/">Apply to YC</a>
| <a href="mailto:hn@ycombinator.com">Contact</a></span><br><br><form method="get" action="//hn.algolia.com/">Search:
<input type="text" name="q" value="" size="17" autocorrect="off" spellcheck="false" autocapitalize="off" autocomplete="false"></form>
</center></td></tr> </table></center></body></html>