Develop Reference

Is WebGL or Canvas the only way to get SVG Keyframe Animations Hardware Accelerated?

What I'm looking is a flash alternative for mobile phones using html5.
I was looking into SVG and it seems the only way to get hardware acceleration is to use CSS transforms on it. But CSS transforms aren't enough, I want to animate the actual nodes that make up a vector (ie, points on a path) so I could get more sophisticated character animation. To do this I was looking at some gui based editors.
I checked what adobe has been up to and they seem to have killed Edge Animate and rebranded Flash as "Animate CC" for 2016.
http://blogs.adobe.com/creativecloud/update-about-edge-tools-and-services/
https://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/
But reading up on "Animate CC" I see that it exports vector animations to either Canvas or WebGL. Which I think is due to them not getting hardware acceleration with native SVG via SMIL or using javascript.
https://css-tricks.com/guide-svg-animations-smil/
Another one is http://www.animatron.com which converts everything to canvas as well.
So my question is, in order to do keyframe animations on nodes within a vector path, a vector needs to be converted to either WebGL or Canvas for it to be hardware accelerated on mobile?
p.s I prefer using SVG as it's loaded in the DOM and I can manipulate things with jquery. This is for a mobile game that uses vectors (svg) as its base but I'd like to incorporate animations too - beyond the basic css transforms. I wish there was a way to have a .svg file that not only contains the vector information but also the animation info. so I could load this .svg file. and then in javascript go:
character1.play('animation1') or something. If SMIL worked fast I'm sure editors like adobe would make it as simple as that.
EDIT: I just read that Chrome 45 killed SMIL in favor of "web animations" and css.
https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
And as Kaiido mentioned in the comments IE never supported smil so maybe that's why adobe never exported to it (?).
http://caniuse.com/#feat=svg-smil
also I never saw any examples online that show hardware accelerated path animation with smil, if any of you guys find a link pls let me know.
EDIT #2: I'm thinking of giving up my wishful thinking and instead looking at vector to canvas exporters like animatron.com. However, it doesn't seem like canvas is even hardware accelerated or fast like css3 transforms. I loaded some animations from animatron in my old iPhone 4s/iOS 8 and it's jittery and slow for example:
https://www.animatron.com/project/1953f3526e5b2ec4eef429c8
whereas css3 transform animations always run very smooth...
I still haven't tested vector to webgl.. but I think that's why adobe eventually chose to use it for their vector animations since canvas is slow and svg is limited.
EDIT #3: sure enough it seems like webgl is the way to go (unless someone finds a way to do this with native svg) http://www.yeahbutisitflash.com/?p=7231 .. this works fast in my iphone 4s/ios8.. I currently think this is the only way to do what I want: hardware accelerated vector based animation (however the graphics don't look as crisp as I'd want them.. webgl kinda messed with that I think).
but this is why I think Edge Animate got killed cause they were trying to create a tool that took advantage of css3 transforms, but ppl want to animate vector nodes so they went back to Flash and rebranded it. (another note: the above webgl anim doesn't work so well on my galaxy S4/kitkat android phone.. so this is mainly for newer devices/OSs)
EDIT #4: come to think of it. it'd be a pain to have multiple webgl contexts running in my program. so if I had 10 animated characters I'd have to have 10 webgl contexts which would be intense for a mobile device.. unless I chose to do the whole game in flash, and then I'd have one big webgl context after I export it. but I prefer to work in the dom. oh well css3 transforms for the meantime.. :/
EDIT #5 - Dec 2016: I'm now using svg/javascript with snap.svg. modern phones seem fast enough.
Other Useful Links I Found:
http://www.crmarsh.com/svg-performance/

Canvas is (as far as i know) software accelerated. So it's rendered by the processor (CPU). The processor (cause of them pixels) ain't that good at graphical stuff but for simple things it would be enough. And it runs everywhere, where there is a processor.
If you want to have better performance on hardware accelerated devices which most modern smartphones are, you need webgl. But you can export your stuff in webgl from adobe CC. Older smartphones are not very optimized on hardware acceleration so please check with your target group what devices they have and try to run your app on one of the slowest devices.
I would not use SVG. SVG is even worse than DOM. You can be faster manipulating HTML in javascript than SVG. I don't know why but it is damn slow. SVG is just an alternative if you want to have scalable graphics or charts and that's what it is made for. To animate in SVG is a pain. Don't do it. It is not optimized for animation.
CSS-Transform is a prototype-like and will not help you with keyframe animation. But it has potential to have an eye on it.
Does this help you?

This library/plugin might be exactly what you are looking for: Greensock SVG Morph Plugin. It seems to perform pretty well on mobile, not sure how well it performs on devices mentioned by you.
It's also not GPU accelerated but Greensock Animation Platform seems to perform extremely well even on mobile devices.

I think its a difficult question to answer as there's so many issues with different browsers. Some don't support SMIL transforms well (or being deprecated, but as mentioned there are fills for it), some don't support CSS3 transforms on SVG elements at all, so most of the 'solutions' out there, have some issue that may need to be compromised on. I think one browser doesn't support d attribute morph properly, but I can't recall which (so test this early on with required browsers if you do go down this route).
Canvas does typically seem to perform better on mobile for most animation I've seen or played with, certainly as the number of objects increases on page.
Other alternatives to webGL that was mentioned..
One option that kinda springs to mind is fabric.js, which is a canvas approach to SVG. It will take the same commands, elements as SVG, but display it on an HTML5 canvas. Turn off drag/freetransform within it (as I think its slowed down a bit with this if it needs extra checks), and I think it will be a bit faster, but its a while since I've played. This could be an interesting approach if you don't need specific DOM element access, but would be fine if you are ok with a similar object based setup.
If you insist on using SVG, then I would look at integrating it with another library (or even 2). Snap or SVG.js are both decent, but can be a bit slow. However, I would experiment with using Velocity.js or React.js with that svg library, as they have some methods that can squeeze out a bit more performance. Also GSAP may be worth a look.

There is no general answer to this, it depends on the browser implementation and your hardware, but ... for the long term solution I would bet on WebGL because it uses the GPU and will ultimately dominate.
WebGL is not well supported right now (2016), and it potentially comes with security issues.
Also see: https://css-tricks.com/rendering-svg-paths-in-webgl/
Canvas is better at working on raw 2d pixel buffers (+ alpha channel) and is slow for higher resolution+animation.
You could use some dual lib like Pixi though.

If you don't mind the k-weight increasing a bit and are comfortable using flash, the easiest and the fastest solution would be to use Animate CC (It's exactly Flash, without the symbol filters and gives canvas output instead of swf).

Performance: CSS3 animations vs. HTML5 Canvas

I'm working on a webapp (will only be running in Chrome 19+) that is currently built with CSS3 transitions. More specifically, I'm using Jquery Transit to fire the CSS3 animations with Jquery itself. The reasoning here was that some of the animations are drawn out for several seconds and jquery animate wasn't smooth enough, but Transit is a great fix for this. Jquery Transit is working quite well but I'm curious to whether HTML5 Canvas will render things even smoother? And if so, is it worth pursuing, given the fact that I'm using AJAX and percentage-based locations for DIVs currently? If anyone here knows how CSS3 Animations compare to HTML5 Canvas performance in Chrome and would be willing to give their input I would greatly appreciate it!

CSS3 will give you fewer headaches and you can change it easily in the future, and it will work gracefully on systems that aren't canvas-enabled.
If you're using text, you should absolutely stick with CSS if you can get away with it. Canvas ruins the accessibility of your app and disallows users from using a carat or highlighting text or using text to speech.
If you're just making a funny sliding button or something then you should also just use CSS as it will probably be much easier to implement and maintain. Redoing CSS is easier than slogging over (what can be complex) JavaScript.
I can't honestly tell you if canvas renderings will be smoother. One plus of the canvas is that you can animate things to a seemingly larger size (while keeping the canvas the same size) without having to cause the DOM to re-layout. On most modern systems this really isn't an issue thought.
Furthermore, if its already done with CSS3, are you actually having performance problems? If nobody has complained about performance yet, why bother rewriting it for canvas? If you aren't encountering any real performance problems so far, why reinvent your app?

The problem I think you might run into with canvas is that it is bitmap based. Therefore scaling up and down after the page is initially rendered will be a problem. Furthermore, line breaks will be painful to deal with potentially. The people who write your site's content might find it challenging to insert line breaks because there is no such thing as a line break using canvas, svg, or vml. In fact you need to pre-compute line breaks. "\n" using raphael.js works, but it isn't great. Furthermore you can't use selectors to target various portions if you in your svg graphics. You may be able to using canvas, maybe.... Canvas probably has a buncha of the same gotchas.
On the image front you will have blurry images if it scales and there are less libraries out there that deal with image resizing for canvas. This may change in the future, but it will still be an ordeal to deal with. I'd just stick with your divs/css3 with jquery fallbacks for older browsers.
From a purely performance perspective, checkout the first comment on your question. It has some nice benchmarks.

dragging object from html page using (using javascript) into a flash container?

I am doing some pre-production on a project that requires drawing on a 3d canvas, which I think flash is the best way to go. But there is a chance down the line that this client might want the site to show up on the ipad, iphone or other mobile devices that don't support flash.
So I was playing with the idea of doing everything in html and javascript except for the actual drawing/3D area. Almost like using flash as the element. I think html5 is too premature to start using this, but might be beneficial down the line. Chances are I will just go the entire flash route, but I thought it would be interesting to try.
Anyway, my question is pretty top level. 1) how hard would it be to drag an object from an html page using javascript, and dropping it into the flashplayer. And then manipulating it from there.
Are there any examples out there that have tried to do this?

Communication between Flash and an HTML page requires the use of ExternalInterface. That's a good place to start. These guys seem to have figured out some of the details.
As far as the iPad and iPhone are concerned, Flash just ain't gonna happen.
However, I don't think it's fair to say HTML5 is "too premature". Lots of people are doing lots of cool things with the canvas element. You could too. :)

Anyone knows the algorithm for this kind of rubbery effect?

I'm doing some animations and I want to implement something like this on the web. I was thinking that the HTML canvas can do this kind of job. Because I can scale part of an image. I just need the algorithm to actually make it work.
The effect is elastic, if the window is small, the greater the elasticity of the window when you restore it. I was thinking that I can make this work in web images.. if the user click the image it will scale with this kind of effect, not the boring way of scaling.
This is ubuntu, I know that we can look at the source code maybe to see how it actually implements the animation. But I dont know where to find it. Or i don't even understand codes written in linux because I just understand php, javascript. Basically I'm not a software developer, My core expertise is in web development.
http://www.youtube.com/watch?v=hgQP-aFragQ

I believe your best bet is having a look at John Resig's Processing.js.
Processing is a animation language for Java; John has ported it to the browser using canvas.

Your not going to find a web based solution that is going to do this for you. If you need something like this done it will have to be in flash or some other application (Lenni mentioned Java) that runs in a separate media box embedded in a web page.
People don't want big flashy animations, seeing something that is 'boring' is much better if it becomes more usable.

First up - I don't know the actual algorithm they use here.
However, I'd attack this by creating a grid of points (say 10x10), each point attached to it's neighbors by damped springs. It might be worth anchoring the edge/corner points to the screen with springs too.
By deforming the grid (stretching and compressing the springs) and then modeling the spring responses, you'd get some interesting effects like those shown. You might then be able to record the patterns so that the points can follow a pre-computed path for faster animation if your animations are predictable.
Then you need to work out how to split the image and map it onto the grid. The splitting may be better done once on the server, but the client can do it if you use canvas.
svg & vml is a possibility - they'll work without plugins and are similar enough to code for, but I don't think you'll get correct enough image deformation. However, you can scale and rotate with impunity (and quickly) so if you just anchor 2 cell image points to the grid rather than all 4, you'll get an interesting animation - not quite like the video, but pretty good.
As for how to model damped springs, you'll need to keep track of the mass of each point (how heavy it is), how much force the spring is exerting on each point (scalar of how compressed/stretched it is and it's vector) and a damping force on the points (resistive force to the square of the velocity of the point).
It's physics modeling, to be sure, but quite possible.
The response may well be slow. Especially on IE. Canvas needs a plug-in on IE, so if you use canvas, IE folk wont see it. SVG works on almost everything except IE, but it does have VML which is similar. http://raphaeljs.com/ is a library that uses whatever's available. This will be a challenge to tune up :)
However you do this, it will always look best in chrome, the V8 javascript engine outstrips everything else for this kind of work. IE has the slowest javascript engine.

Web page image effects - JavaScript? How else?

I have an idea I'm trying to implement.
I want to display half a dozen pictures on a screen, in say a circle shape, and as I hover over one with the mouse it fades from grey and white into full colour, maybe even getting a little larger, or generating a drop-shadow effect which stays while the mouse is over it.
Although I'm not too shabby on VB6 and SQL Server, my web development experience extends about at far as using notepad to generate raw HTML to display some favourite folders, links to websites and documents etc, in Active Desktop.
So guys, what programming resource websites should I be looking at, such as w3schools.com and specifically whether I should be using JavaScript or some other method ... also specific method calls to look at would be good.
I'm not after "here ... try this code" and then 10 screens of code to cut and paste, I'm after tips, such as "for the positioning, look at www.thiswebpage.com and look at XYZ" and "for the fade effect, look at ABC method on JavaScript" or whatever.
EDIT: 14/07/2009 - Just thought that this might be pertinent. I'll be hosting the pages on a Google Apps hosted website.
Also, the black and white fade effect wasn't the only effect I was considering, it was just one possibility. Other nice, subtle effects might be considered.

What you want to implement shouldn't be all that difficult. However if you do not know any JS then W3C schools is a good place to start.
You should also check out Mootools. It is a great framework for all your JS needs. They also have some great demos you can try.

For general effects and starting point for this type of user experience: JQuery
From there - research jQuery plugins that do this type of thing. Good search terms may be carousel.

Raphaël is a very nice Javascript library that can do everything you want. For instance, they have demos with drop shadows on images and with image rotation.

For that type of work I like to use Scriptaculous. It has a number of animation commands that are easy to use. You can run a bunch of effects in parallel on a DIV, so you can easily perform a MOVE and a SCALE effect on the same object and it handles the synchronization.
You can do all of this with regular old JavaScript.
Here is an example of a MOVE:
new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' });

You could probably get a quite similar effect done by using some JS library which can animate CSS properties nicely. For example Scriptaculous and jQuery can probably fit the task and should be simple to learn.
The basic idea would be that you have an image in a div. The image's transparency can be set to 0.5, so the div's background color shades through it. This way you can get an effect similar to a black and white image with the correct choice of a background.
If you want an exact black and white effect or such, you will have to generate black and white versions of your images, or use the HTML5 canvas element to manually apply color transforms to the images. That won't work in older browsers and internet explorer, though.

Learn JS, you can learn the syntax from http://www.w3schools.com/JS/default.asp
Expand this knowledge with articles from known writers, like Crockford.
Salt it all with learning one of the leading frameworks (I like Mootools).
While doing steps 1-3 code, code, and do more coding.

You will need some form of Javascript, and if I were doing that I would look at the Script.aculo.us library. (An immediate effect could be done with CSS, but for a gradual fade, you will need Javascript.)