6 ms·

Javascript libraries for animation in HTML5

87 points by neya 15y ago

camwest 15y ago
tl:dr - this site sucks on the iPad. It's a shame that so much effort is put into an HTML5 page that is obviously trying to demonstrate the frameworks it is promoting and yet get the experience so awfully wrong on a touch screen device like the iPad.
- allbutlost 15y ago
  You're right that a framework that should provide mobile compatible animations should have a website that is itself mobile-friendly. However the page itself doesn't seem to use any of the frameworks it is promoting, and doesn't seem to do a lot of demonstrating as of yet. The full site is apparently coming soon though...
- aw3c2 15y ago
  It sucks on a desktop machine too. You have to hover each icon to make a slowly in-fading low-contrast (and apparently a colourful mess due to not being a good font for my monitor) vague one line description appear.
5vforest 15y ago
What's up with PreloadJS just linking to an empty GitHub repo?
- xxbondsxx 15y ago
  Seriously, I was excited for it too. Managing preloading assets (that might be cached) is a pain sometimes
iab 15y ago
Wow - that is an eye-catching page, very awesome
alexhaefner 15y ago
This site does nothing to tell me what these frameworks actually do. Or where I would want to fit them into a project.
- neya 15y ago
  Actually this is a framework that is being integrated into the current line-up of Adobe Flash IDE to convert/export your Flash SWF animations to HTML5 canvas. I believe this has tremendous potential, since there aren't many/any IDE's available to create animations for the Web using HTML5. I suggest you to kindly check this link out: http://blogs.adobe.com/creativelayer/2012/02/28/html5-flash-professional/ http://blogs.adobe.com/creativelayer/2012/02/28/html5-flash-...
  - alexhaefner 15y ago
    Ah I see, I was tremendously confused by the site. The site itself does not actually explain any of this, and I am not a user who actively follows this stuff. So when I clicked on the site I saw a bunch of frameworks, with no understanding of how they were linked, or what their purpose was. I hope you can see how I was confused. And the title of the HN post does not link to what the actual purpose of the frameworks is, i.e. a set of tools for flash exporting to html. I felt like the site did not provide any of this context. That explains a lot. Thanks.
    - neya 15y ago
      You're most welcome!
noduerme 15y ago
Hi - any way I can get StrikeDisplay on the list? http://strikedisplay.blogspot.com http://strikedisplay.blogspot.com [Edit] Lol, oops. I just realized this is your site Grant...? so there's probably no way that's gonna happen, huh. Ah well.
franze 15y ago
i have to say i'm personally disappointed with all the image/canvas filter effect libs out there. i.e.: view-source:http://easeljs.com/examples/filters.html http://easeljs.com/examples/filters.html the effects math is fine and all that, but... the big mistake they are all doing is to work directly on the canvas instead of just taking a canvas as input and deliver another canvas as output (optional async to a callback). said that, i'm currently working on a solution, a simple functional canvas lib, one canvas goes in, another canvas comes out. no side effects. update: if somebody is interested, it's shared here https://github.com/franzenzenhofer/canwaste/blob/master/main.coffee https://github.com/franzenzenhofer/canwaste/blob/master/main... ... but it's explorative programming (meaning: i coded it drunk) so don't expect to much at this point.
- stdbrouw 15y ago
  Honest question: why?
  - franze 15y ago
    the simple answer is: because simple is better than complicated ... var blurFilter = new BoxBlurFilter(32, 2, 2); var margins = blurFilter.getBounds(); bmp = bmp.clone(); bmp.filters = [blurFilter]; // filters are only displayed when the display object is cached // later, you can call updateCache() to update changes to your filters bmp.cache(margins.x,margins.y,img.width+margins.width,img.height+margins.height); bmp.x += bmp.x+img.width; stage.addChild(bmp); ... should be var blurcanvas = boxBlurFilter(originalcanvas,32,2,2); and then, if we want to see it on the page (i.e. instead of the original canvas) $(originalcanvas).replaceWith(blurcanvas) //or any other jQuery mumbo jumbo canvas are cheap. we must start wasting them.
    - Arelius 15y ago
      The problem is that canvas are not cheap enough. And there are numerous scenarios where wasting them will prove to be a huge disadvantage to performance. Which is already mostly a problem in JavaScript, and the web in general.
fiddly_bits 15y ago
On a related note, gskinner is also responsible for one of the coolest regex tools: http://gskinner.com/RegExr/ http://gskinner.com/RegExr/ It's written in Flex and is also available as an Air app, makes writing regular expressions almost intuitive.
cinquemb 15y ago
eww....javascript

87 points by neya 15y ago

tl:dr - this site sucks on the iPad. It's a shame that so much effort is put into an HTML5 page that is obviously trying to demonstrate the frameworks it is promoting and yet get the experience so awfully wrong on a touch screen device like the iPad.

allbutlost 15y ago
You're right that a framework that should provide mobile compatible animations should have a website that is itself mobile-friendly. However the page itself doesn't seem to use any of the frameworks it is promoting, and doesn't seem to do a lot of demonstrating as of yet. The full site is apparently coming soon though...
aw3c2 15y ago
It sucks on a desktop machine too. You have to hover each icon to make a slowly in-fading low-contrast (and apparently a colourful mess due to not being a good font for my monitor) vague one line description appear.

5vforest 15y ago

What's up with PreloadJS just linking to an empty GitHub repo?

xxbondsxx 15y ago
Seriously, I was excited for it too. Managing preloading assets (that might be cached) is a pain sometimes

iab 15y ago

Wow - that is an eye-catching page, very awesome

alexhaefner 15y ago

This site does nothing to tell me what these frameworks actually do. Or where I would want to fit them into a project.

neya 15y ago
Actually this is a framework that is being integrated into the current line-up of Adobe Flash IDE to convert/export your Flash SWF animations to HTML5 canvas. I believe this has tremendous potential, since there aren't many/any IDE's available to create animations for the Web using HTML5. I suggest you to kindly check this link out: http://blogs.adobe.com/creativelayer/2012/02/28/html5-flash-professional/ http://blogs.adobe.com/creativelayer/2012/02/28/html5-flash-...
- alexhaefner 15y ago
  Ah I see, I was tremendously confused by the site. The site itself does not actually explain any of this, and I am not a user who actively follows this stuff. So when I clicked on the site I saw a bunch of frameworks, with no understanding of how they were linked, or what their purpose was. I hope you can see how I was confused. And the title of the HN post does not link to what the actual purpose of the frameworks is, i.e. a set of tools for flash exporting to html. I felt like the site did not provide any of this context. That explains a lot. Thanks.
  - neya 15y ago
    You're most welcome!

noduerme 15y ago

Hi - any way I can get StrikeDisplay on the list? http://strikedisplay.blogspot.com http://strikedisplay.blogspot.com [Edit] Lol, oops. I just realized this is your site Grant...? so there's probably no way that's gonna happen, huh. Ah well.

franze 15y ago

i have to say i'm personally disappointed with all the image/canvas filter effect libs out there. i.e.: view-source:http://easeljs.com/examples/filters.html http://easeljs.com/examples/filters.html the effects math is fine and all that, but... the big mistake they are all doing is to work directly on the canvas instead of just taking a canvas as input and deliver another canvas as output (optional async to a callback). said that, i'm currently working on a solution, a simple functional canvas lib, one canvas goes in, another canvas comes out. no side effects. update: if somebody is interested, it's shared here https://github.com/franzenzenhofer/canwaste/blob/master/main.coffee https://github.com/franzenzenhofer/canwaste/blob/master/main... ... but it's explorative programming (meaning: i coded it drunk) so don't expect to much at this point.

stdbrouw 15y ago
Honest question: why?
- franze 15y ago
  the simple answer is: because simple is better than complicated ... var blurFilter = new BoxBlurFilter(32, 2, 2); var margins = blurFilter.getBounds(); bmp = bmp.clone(); bmp.filters = [blurFilter]; // filters are only displayed when the display object is cached // later, you can call updateCache() to update changes to your filters bmp.cache(margins.x,margins.y,img.width+margins.width,img.height+margins.height); bmp.x += bmp.x+img.width; stage.addChild(bmp); ... should be var blurcanvas = boxBlurFilter(originalcanvas,32,2,2); and then, if we want to see it on the page (i.e. instead of the original canvas) $(originalcanvas).replaceWith(blurcanvas) //or any other jQuery mumbo jumbo canvas are cheap. we must start wasting them.
  - Arelius 15y ago
    The problem is that canvas are not cheap enough. And there are numerous scenarios where wasting them will prove to be a huge disadvantage to performance. Which is already mostly a problem in JavaScript, and the web in general.

fiddly_bits 15y ago

On a related note, gskinner is also responsible for one of the coolest regex tools: http://gskinner.com/RegExr/ http://gskinner.com/RegExr/ It's written in Flex and is also available as an Air app, makes writing regular expressions almost intuitive.

cinquemb 15y ago

eww....javascript