

Javascript libraries for animation in HTML5 - neya
http://createjs.com/

======
camwest
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
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...

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

~~~
neya
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-...](http://blogs.adobe.com/creativelayer/2012/02/28/html5-flash-
professional/)

~~~
alexhaefner
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
You're most welcome!

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

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

------
franze
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>

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...](https://github.com/franzenzenhofer/canwaste/blob/master/main.coffee)
... but it's explorative programming (meaning: i coded it drunk) so don't
expect to much at this point.

~~~
stdbrouw
Honest question: why?

~~~
franze
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
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.

~~~
franze
for web-sized-pics and (instagram like) filter-effects (even effects stacked
upon each other) they are cheap enough, but yeah, that question will only be
solved with real world performance tests.

from my point of view: most of the canvas (effect) libs smell like premature
optimization to me. could be wrong, though.

~~~
Arelius
The context is within an thread on Animation. Yes, of course it's cheap enough
for an effect you are just generating a still of, but it is a measurably slow
approach for anything that needs animation.

And couldn't you create the kind of library you wanted by simply making a
wrapper that called did something like

    
    
        function X(canvas, ...) { var C = canvas.clone(); oldX(C, ...); return canvas }
    

You can't really do the opposite and get the performance advantages.

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

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

------
noduerme
Hi - any way I can get StrikeDisplay on the list?
<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.

------
cinquemb
eww....javascript

