Adobe previews Edge, a prototype HTML 5 animation IDE(tv.adobe.com)
tv.adobe.com
Adobe previews Edge, a prototype HTML 5 animation IDE
http://tv.adobe.com/watch/adc-presents/preview-of-the-edge-prototype-tool-for-html5-/
15 comments
Let's just hope the "standards-compliant" code it spits out is better than that spit out by Dreamweaver, FrontPage, etc...
While quiet obvious to some, I think it's worth mentioning that Adobe was never against HTML5, or implicitly worried about Flash because of it.
Adobe always tried to make a case for Flash based on a few points that some refuse to grasp. HTML5 just can't do- or not easily at least -some of the things Flash can (e.g. webcam interaction, RTMP, multi-threaded animation).
This isn't to say that Flash is amazing, just that developers must have some kind of platform to deliver engaging, rich experiences for many reasons. Not all of them are banner ads and movie sites.
While Flash may have had many years as a cheesy intro page engine, more recent development with Flash is often an impromptu petrie dish for future advances in standards and web-based UI.
The real issue is, could implementation of a standards-based Flash variant work? And if so, how?
Certainly Adobe has pondered whether Flash would survive such standardization since we barely see CSS3 and HTML5 specs materialized as necessary.
Adobe always tried to make a case for Flash based on a few points that some refuse to grasp. HTML5 just can't do- or not easily at least -some of the things Flash can (e.g. webcam interaction, RTMP, multi-threaded animation).
This isn't to say that Flash is amazing, just that developers must have some kind of platform to deliver engaging, rich experiences for many reasons. Not all of them are banner ads and movie sites.
While Flash may have had many years as a cheesy intro page engine, more recent development with Flash is often an impromptu petrie dish for future advances in standards and web-based UI.
The real issue is, could implementation of a standards-based Flash variant work? And if so, how?
Certainly Adobe has pondered whether Flash would survive such standardization since we barely see CSS3 and HTML5 specs materialized as necessary.
> HTML5 just can't do- or not easily at least -some of the things Flash can (e.g. webcam interaction, RTMP, multi-threaded animation).
Webcam integration: Sure, I'll buy that.
RTMP: Of course HTML5 isn't built with a technology that was developed for Flash. You know what Flash doesn't have? A <video> tag! Can equal functionality be built with Flash? Of course, very easily. But don't go calling Flash-specific protocols things that are against HTML5; that's silly.
multi-threaded animation: HTML5 has WebWorkers and multithreaded JavaScript. Not sure why you think this can't be applied to animation.
HTML5 is stronger than you think.
Webcam integration: Sure, I'll buy that.
RTMP: Of course HTML5 isn't built with a technology that was developed for Flash. You know what Flash doesn't have? A <video> tag! Can equal functionality be built with Flash? Of course, very easily. But don't go calling Flash-specific protocols things that are against HTML5; that's silly.
multi-threaded animation: HTML5 has WebWorkers and multithreaded JavaScript. Not sure why you think this can't be applied to animation.
HTML5 is stronger than you think.
> RTMP: Of course HTML5 isn't built with a technology that was developed for Flash.
Likewise, a similar protocol could have been created for HTML5 video. It would be hard to argue that the web doesn't need some sort of persistence for video. Waiting for an entire video to load before you can seek to an appropriate position makes HTML5 video outright archaic in this light.
> But don't go calling Flash-specific protocols things that are against HTML5; that's silly.
It's silly to ascertain Flash as an enemy of HTML5, period. I never did. I simply implied that Flash has a leg-up in some important departments.
> multi-threaded animation: HTML5 has WebWorkers and multithreaded JavaScript. Not sure why you think this can't be applied to animation.
Let's assume for a minute that I didn't preface with "...not easily at least" and claimed that it couldn't be done at all. No matter the reach or depth of your imagination, you will not be able to conjure up a single timeline-critical HTML5+JS-based site that performs on the same level as a Flash-developed one. By that, I mean Flash is much more capable of handling vector-based and raster-based graphics at high speeds while maintaining composure. Secondly, WebWorkers and timeline animation -despite your insistence- is not easy to implement, as I earlier stated. If your statement was entirely true and HTML5+JS was readily capable of such feats, I'd imagine we'd see much less Flash games and much more JS-based ones today.
> HTML5 is stronger than you think.
I never attested that it wasn't strong. Regardless of Flash, I hope that HTML5 continues to evolve and is eventually capable of what Flash is. At this time, it is not capable and selling these false statements does nothing to help HTML5's cause.
Read more here: http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
Likewise, a similar protocol could have been created for HTML5 video. It would be hard to argue that the web doesn't need some sort of persistence for video. Waiting for an entire video to load before you can seek to an appropriate position makes HTML5 video outright archaic in this light.
> But don't go calling Flash-specific protocols things that are against HTML5; that's silly.
It's silly to ascertain Flash as an enemy of HTML5, period. I never did. I simply implied that Flash has a leg-up in some important departments.
> multi-threaded animation: HTML5 has WebWorkers and multithreaded JavaScript. Not sure why you think this can't be applied to animation.
Let's assume for a minute that I didn't preface with "...not easily at least" and claimed that it couldn't be done at all. No matter the reach or depth of your imagination, you will not be able to conjure up a single timeline-critical HTML5+JS-based site that performs on the same level as a Flash-developed one. By that, I mean Flash is much more capable of handling vector-based and raster-based graphics at high speeds while maintaining composure. Secondly, WebWorkers and timeline animation -despite your insistence- is not easy to implement, as I earlier stated. If your statement was entirely true and HTML5+JS was readily capable of such feats, I'd imagine we'd see much less Flash games and much more JS-based ones today.
> HTML5 is stronger than you think.
I never attested that it wasn't strong. Regardless of Flash, I hope that HTML5 continues to evolve and is eventually capable of what Flash is. At this time, it is not capable and selling these false statements does nothing to help HTML5's cause.
Read more here: http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
> I'd imagine we'd see much less Flash games and much more JS-based ones.
HTML5 games work (by default) on ~50% of computers because there is no Microsoft implementation. The reason we haven't seem many games in HTML5 is because of Microsoft's lack of HTML5 support. When everyone is using Windows 7 and IE9 (with hardware acceleration, too!) HTML5 will outperform Flash and will be available on every platform.
HTML5 games work (by default) on ~50% of computers because there is no Microsoft implementation. The reason we haven't seem many games in HTML5 is because of Microsoft's lack of HTML5 support. When everyone is using Windows 7 and IE9 (with hardware acceleration, too!) HTML5 will outperform Flash and will be available on every platform.
We'll soon be cursing HTML5 for powering too much unnecessary animation on the web: ads, restaurant websites, etc. Adobe's tools will make it so easy, that people are bound to abuse their power.
That abuse of power has been the main problem with Flash, on Windows at least (Mac+Linux have relatively poor implementations of the player).
That abuse of power has been the main problem with Flash, on Windows at least (Mac+Linux have relatively poor implementations of the player).
I hope this isn't something anyone is just now realising. Though, I shouldn't be surprised. I always wonder why people hated on Flash ads so much and supported HTML5... when the truth was, HTML5 and tech would allow companies to do essentially the same thing. Except now instead of just disabling Flash, you'd have to disable... what?
Basically, the benefit of HTML5 and associated technologies (seriously, that's getting annoying fast, maybe I should just rename it Superior HTML5 and Integrated Technologies, and shorten that to... nm) is simple that you'll be able to run "Flash like things" without a plug-in.
Everything Flash can do, browsers will be able to do by default. Yay. Net result? You don't need a plug-in. Everything else remains.
Basically, the benefit of HTML5 and associated technologies (seriously, that's getting annoying fast, maybe I should just rename it Superior HTML5 and Integrated Technologies, and shorten that to... nm) is simple that you'll be able to run "Flash like things" without a plug-in.
Everything Flash can do, browsers will be able to do by default. Yay. Net result? You don't need a plug-in. Everything else remains.
Except now instead of just disabling Flash, you'd have to disable... what?
This is an understandable concern, but at the risk of stating the obvious, HTML5 is HTML. Any HTML5 elements that irk you are available for your inspection and manipulation through the DOM. This means that sites that abuse HTML5 can be easily "patched" with Greasemonkey scripts, Safari extensions, Chrome extensions, etc.
This is an understandable concern, but at the risk of stating the obvious, HTML5 is HTML. Any HTML5 elements that irk you are available for your inspection and manipulation through the DOM. This means that sites that abuse HTML5 can be easily "patched" with Greasemonkey scripts, Safari extensions, Chrome extensions, etc.
Oh, I realize that. =) Of course, I find it funny that we'll have to install plug-ins to do what not installing a plug-in accomplished before.
Net result? The web is controlled by open standards and organizations with multiple implementations of the standard. Rather than the current situation, which is total SHIT: a single company in California - Adobe - controls 99% of the media online.
That's bad news. Flash is constantly full of security holes that only Adobe can fix. Flash's performance cross-platform is abysmal since nobody can fix it but them and they don't care. Fuck Flash, long live open technologies!
And just call it HTML5: everyone knows you're including the new JavaScript APIs when you say that.
HTML5 allows us to build rich applications for the web that will run on virtually every single device made (except for Microsoft devices this year, next year will change).
Don't bash tech you don't understand the benefits of.
That's bad news. Flash is constantly full of security holes that only Adobe can fix. Flash's performance cross-platform is abysmal since nobody can fix it but them and they don't care. Fuck Flash, long live open technologies!
And just call it HTML5: everyone knows you're including the new JavaScript APIs when you say that.
HTML5 allows us to build rich applications for the web that will run on virtually every single device made (except for Microsoft devices this year, next year will change).
Don't bash tech you don't understand the benefits of.
> That's bad news...
Of course it is.
> HTML5 allows us to build rich application
Yes, I know. I love HTML5.
> Don't bash tech you don't understand the benefits of.
I wasn't bashing HTML5. I think you completely misunderstood my comment. I'm all for open standards. I never suggested otherwise.
Of course it is.
> HTML5 allows us to build rich application
Yes, I know. I love HTML5.
> Don't bash tech you don't understand the benefits of.
I wasn't bashing HTML5. I think you completely misunderstood my comment. I'm all for open standards. I never suggested otherwise.
Agreed. The only good thing about Flash is that it is easy to block.
This is the Adobe we want. Kudos to them for paying attention to HTML 5 as a valuable tool for web developers.
Actually there were no HTML5 stuff shown in the demo, I can code those effects to work with IE6. In fact that demo may even work in IE6 if you would include some hacks.
This is not so much an endorsement of their methods as it is an acknowledgement that they're paying attention. Adobe has a lot invested in Flash, and their willingness to produce tools like this shows that they're not so buried in their own proprietary technology that they'll cut their nose off to spite their face. That may sounds like a basic assumption, but many companies, especially large ones, frequently do just that.
Adobe is an unusual large company, in that it has successfully managed the transition between closed and open before. Starting with the fonts for postscript printers, just a few years after Adobe was founded.
Flash itself was also (somewhat) opened a few years back, to successfully fend off open source alternatives - though I don't recall if it was still owned by Macromedia at that time.
They've also known when they could successfully stay closed despite vigorous open competition, as in Photoshop vs. Gimp.
So Adobe probably understands the issues of open/closed better than anyone, and has an organizational structure that has proven able to adapt to it.
[ Though it's worth noting that MS made an incredible sacrifice to ship windows for netbooks at a massive discount, to fend off linux. Although I use a linux netbook myself, I have to admire their foresight and fortitude. Another company is Intel. Although I don't have a specific story for them, Andy Grove wrote a book Only the Paranoid Survive, and also has a blurb on the cover of The Innovator's Dilemma ("lucid, analytical - and scary" he says) - they know the danger, and have lasted a long long time, as the driver (and proposer) of Moore's Law. ]
So Adobe probably understands the issues of open/closed better than anyone, and has an organizational structure that has proven able to adapt to it.
[ Though it's worth noting that MS made an incredible sacrifice to ship windows for netbooks at a massive discount, to fend off linux. Although I use a linux netbook myself, I have to admire their foresight and fortitude. Another company is Intel. Although I don't have a specific story for them, Andy Grove wrote a book Only the Paranoid Survive, and also has a blurb on the cover of The Innovator's Dilemma ("lucid, analytical - and scary" he says) - they know the danger, and have lasted a long long time, as the driver (and proposer) of Moore's Law. ]
The term “HTML5” has come to include CSS3 and various other things currently proposed or in the process of being implemented that have nothing to do with HTML. You may not like it but that’s just how it is.
That may be true, but we can hold ourselves as a community to a higher level of clarity and correctness.
[deleted]
I swore I saw a <section> tag. Sorry, had to play devil's advocate. I think people generally just group HTML5 and CSS3 together. I would say that perhaps Adobe is doing that as well, but it's equally plausible that it (Edge) promotes the use of HTML5 specific elements and markup?
Interesting that they're doing it as desktop software, since everything they demonstrate could be done just as well inside of a browser.
The reason I know this is that I'm currently building a prototype application that looks almost exactly like this, and that in its current form could produce the exact same demo in that video. Spooky, but comforting that we actually have a leg up on Adobe...
The reason I know this is that I'm currently building a prototype application that looks almost exactly like this, and that in its current form could produce the exact same demo in that video. Spooky, but comforting that we actually have a leg up on Adobe...
If you believe web apps to be superior to desktop apps then yes, you have a leg up.
However, this is content creation - and if Adobe develop this product, they will have workflow integration with Fireworks, Photoshop, Illustrator etc which you won't be able to match. Much of the world still have slow upload speeds, so uploading assets sucks.
How will this webapp work, if its SaaS then that's a monthly sub whereas you can just pay Adobe a fixed fee?
What if I want to work on my html files, css files, and other components with my own asset management system / source control which is behind a VPN on a company server - I can't integrate that with your SaaS.
I hope you're releasing as a standalone web app I can buy and download - I don't want to invest in a content creation tool which I have to rent and could disappear.
Sometimes desktop apps are much better than web apps, and I believe this kind of tool to be one of them. I am slightly biased though because I am a big fan of the desktop app!
However, this is content creation - and if Adobe develop this product, they will have workflow integration with Fireworks, Photoshop, Illustrator etc which you won't be able to match. Much of the world still have slow upload speeds, so uploading assets sucks.
How will this webapp work, if its SaaS then that's a monthly sub whereas you can just pay Adobe a fixed fee?
What if I want to work on my html files, css files, and other components with my own asset management system / source control which is behind a VPN on a company server - I can't integrate that with your SaaS.
I hope you're releasing as a standalone web app I can buy and download - I don't want to invest in a content creation tool which I have to rent and could disappear.
Sometimes desktop apps are much better than web apps, and I believe this kind of tool to be one of them. I am slightly biased though because I am a big fan of the desktop app!
He's playing to his strength which is smart. Trying to compete with Adobe on cross-app desktop integration is a fool's errand. Going balls to the wall "Web" is something that might net him a thin slice of Adobe's delicious market share.
I am sure he can and not denying that. I just wanted to outline that I don't believe web apps to be superior to desktop apps. In many cases they are not and I think this is one of those instances.
This actually looks quite awesome, which is a stretch for me considering my opinion of Adobe lately.
I've always wanted to make a similar tool for JS animations, but never got around it.
I've always wanted to make a similar tool for JS animations, but never got around it.
It uses jQuery, and it generates jQuery/JavaScript code, which is good because you could check it out and learn it. I learned SQL with PHPMyAdmin, so I think you may be able to actually learn how this works behind the scenes.
Correct me if I'm wrong (I may well be), but I was under the impression the JS aspects were used for things not implementable in CSS3/HTML5 spec? With the generated animations being done primarily in CSS3 (but maybe a JS fallback?)
I'm having a hard time finding official/reputable info on this, so if you've seen it please share. =)
If it does just use JS for animations, it's quite deceiving to call this an HTML5 animation tool. Though I'm aware the CSS3 spec isn't officially part of HTML5, I think most people assume it is.
I'm having a hard time finding official/reputable info on this, so if you've seen it please share. =)
If it does just use JS for animations, it's quite deceiving to call this an HTML5 animation tool. Though I'm aware the CSS3 spec isn't officially part of HTML5, I think most people assume it is.
Quote from http://www.optimum7.com/internet-marketing/web-development/p...
"Believe it or not, the biggest road block I encountered when creating this css3 cartoon was switching the scenes at the correct moment to coincide with the css3 animation. I used jquery’s built in delay function to flip through the scenes and activate the next scene."
Being able to correctly time your animation is at least as important as the effects themselves. You don't get it with CSS not even CSS3. To be more specific: http://api.jquery.com/animate/
TL;DR: the animation logic can only be done in JavaScript, CSS does not have such a feature, and it doesn't even need to because it's fine to do that in JavaScript.
"Believe it or not, the biggest road block I encountered when creating this css3 cartoon was switching the scenes at the correct moment to coincide with the css3 animation. I used jquery’s built in delay function to flip through the scenes and activate the next scene."
Being able to correctly time your animation is at least as important as the effects themselves. You don't get it with CSS not even CSS3. To be more specific: http://api.jquery.com/animate/
TL;DR: the animation logic can only be done in JavaScript, CSS does not have such a feature, and it doesn't even need to because it's fine to do that in JavaScript.
Sorry to be "that guy" but looking at the source, he uses JS just for changing scenes and sometimes for opacity (the latter of which can be done w/ CSS3)
When I was referring to animations, I meant the actual transformation of the element/object, which he does use CSS3 for.
I'm a jQuery user myself, along with plenty of CSS3 action, and I was indeed aware you still need to use JS for scene changes and triggering CSS3 animations.
Why I want this tool to use CSS3 for the actual animations themselves is the performance. I'm not sure what voodoo browsers use to make CSS3 animations so much more smooth then the equivalent JS animation, but it's so noticable. Especially on iOS devices.
Thanks for the link, I hadn't seen this example before and it rocks!
When I was referring to animations, I meant the actual transformation of the element/object, which he does use CSS3 for.
I'm a jQuery user myself, along with plenty of CSS3 action, and I was indeed aware you still need to use JS for scene changes and triggering CSS3 animations.
Why I want this tool to use CSS3 for the actual animations themselves is the performance. I'm not sure what voodoo browsers use to make CSS3 animations so much more smooth then the equivalent JS animation, but it's so noticable. Especially on iOS devices.
Thanks for the link, I hadn't seen this example before and it rocks!
Either way, it'll be a great learning and prototyping tool. Not to mention it's great to see some interesting web development tools that offer a little more than code completion/syntax highlighting.
Hopefully Adobe carries this through to a product (or even better, a free tool?) and doesn't let it die as a prototype.
Hopefully Adobe carries this through to a product (or even better, a free tool?) and doesn't let it die as a prototype.
Pre-announcing cuts off the oxygen to competitors - although you probably could code up what they've done, how do you feel about competing with Adobe's headspace with animators? Better to try something else, right? And they also have huge depth of experience with animator's needs, and detailed tech knowhow for meeting those needs. But if Adobe wasn't entering, it would be a great opportunity. So they pre-announce.
I'm surprised that you have to edit code to change parameters - I would have thought that would been natural to have in a GUI, and would give a less cluttered workflow for animators.
A nice effect having two cameras, and simple to edit between them.
I'm surprised that you have to edit code to change parameters - I would have thought that would been natural to have in a GUI, and would give a less cluttered workflow for animators.
A nice effect having two cameras, and simple to edit between them.
I have done some development with CSS transitions/animations (see http://www.blackvostok.com/test/ in Safari under Snow Leopard) and I absolutely love the smoothness hardware acceleration provides. It's really simple once you understand it's just an interpolation between two states.
Edge seems to solve a pet peeve I have with CSS Transitions: chaining animations is a drag. You gotta listen when the animation is over to fire the next one. A couple of them and your head will explode.
That said, I have encountered some stumbling blocks which Edge can't resolve:
1. No frame by frame animation. Imagine you have a large jpeg with all the frames of a video, you place it as the background of a fixed size container, and then change the background position every x milliseconds. This could be an interactive version of an animated gif, but it just can't be done with css animations. The frames slide from each frame to the other.
2. Unless your target platform is webkit under iPhone/iPad you're out of luck with the hardware accelerated 3d transitions.
3. There are no animations along a path, even though you can kinda fake it by changing the rotation origin. To be honest I think this belongs more to canvas than to CSS transitions.
Edge seems to solve a pet peeve I have with CSS Transitions: chaining animations is a drag. You gotta listen when the animation is over to fire the next one. A couple of them and your head will explode.
That said, I have encountered some stumbling blocks which Edge can't resolve:
1. No frame by frame animation. Imagine you have a large jpeg with all the frames of a video, you place it as the background of a fixed size container, and then change the background position every x milliseconds. This could be an interactive version of an animated gif, but it just can't be done with css animations. The frames slide from each frame to the other.
2. Unless your target platform is webkit under iPhone/iPad you're out of luck with the hardware accelerated 3d transitions.
3. There are no animations along a path, even though you can kinda fake it by changing the rotation origin. To be honest I think this belongs more to canvas than to CSS transitions.
Finally! They should have begun work on this a couple years ago. But its good to see they're finally headed in the right direction.
I just hope the HTML & JS it spits out is nicer than the HTML that Dreamweaver spit out. :)
I just hope the HTML & JS it spits out is nicer than the HTML that Dreamweaver spit out. :)
While this is a cool prototype and a step in the right direction, I don't think Adobe should be allowed to get away calling all these features HTML5 when it's all JS, jQuery and some iffy CSS transitions. The media loves buzzwords and Adobe delivers.
I don't care if its HTML5 or not, a huge portion of content on the web is made by people using Adobe products. Improving Adobe's authoring tools (and like you say, this seems like a great step in that direction) is one of the single things that could go the farthest toward making the web more usable today.
I was excited to see Adobe using jQuery, but then was brought down thinking about how they got here. Adobe was so stuck on making the swf a de facto standard that they completely missed the boat defining the direction of the web. While Apple was moving CSS in a way that suited them, Adobe could have been working on bringing Actionscript straight into the browser so that Flash could have exported to HTML. Instead they're showing off what essentially is a UI for a javascript library made by a reddit.com/r/sex moderator(1). It's sad.
(1) No disrespect to John Resig, he's one of my heroes. The image was too good to pass up.
(1) No disrespect to John Resig, he's one of my heroes. The image was too good to pass up.
Somewhat ironically, you can't view the presentation without Flash.
Adobe isn't jumping ship on Flash, it's still a viable product with a place on the internet.
I hope this means that Adobe, too, have accepted the fact that the world would be a better place if we replaced Flash with something more scalable, instead of sticking to the hodge-podge mess of a closed, backwards compatible proprietary runtime draining my battery at the rate of a stormwater pipework that is the current Flash plugin.
Adobe still has lots of genuine value to leech from their design tools, even if they eventually targetted HTML5 and other new technologies. I hope they won't kill this development in its infancy.
Adobe still has lots of genuine value to leech from their design tools, even if they eventually targetted HTML5 and other new technologies. I hope they won't kill this development in its infancy.
jesus. 9 JS files for that demo.
1. Initial reaction: Quick, upgrade Adobe from “Sell” to “Don’t Buy”! (This is an Arrested Development reference, but I mean it literally.) They seem to be finally realizing that, hey, Flash really isn’t going to be everywhere anymore.
2. The demo is in Flash, so I haven’t seen it. (EDIT: This assumption is wrong, but the observation holds:) But looking at everything else Adobe has done with “HTML5” so far, I’m going to assume it’s basically exporting Flash to <canvas>. Which is, yes, HTML5, but <canvas> is no more a replacement for real HTML — you know, tags and semantic markup — than Flash is; you miss out on accessibility (often), SEO, graceful degradation, etc., and it sucks CPU cycles almost as much as Flash, because you’re drawing individual pixels in JavaScript.
2. The demo is in Flash, so I haven’t seen it. (EDIT: This assumption is wrong, but the observation holds:) But looking at everything else Adobe has done with “HTML5” so far, I’m going to assume it’s basically exporting Flash to <canvas>. Which is, yes, HTML5, but <canvas> is no more a replacement for real HTML — you know, tags and semantic markup — than Flash is; you miss out on accessibility (often), SEO, graceful degradation, etc., and it sucks CPU cycles almost as much as Flash, because you’re drawing individual pixels in JavaScript.
You really should actually watch it before passing judgement. It does not seem to compile down to <canvas> -- it may use it for some bits, but they emphasize that CSS transformations and transitions are being used in a few different key places. It seems that it really does use HTML5, not just a canvas.
I'd have to agree, I was pretty impressed. I paused it in a couple of instances when they were showing the HTML source view and I didn't see any canvas tags. Obviously they could be added dynamically via JavaScript, but that doesn't seem to be the case as you've said. And to back up your statements, they did stress CSS transformations and there is a DOM view which clearly shows him editing DOM elements which when matched with the source code view implies pure HTML. My hope would be that they'd leverage jQuery to handle the actual dirty work of doing the transformations and focus on the tooling and timeline, though I'd imagine it's too early to know if that's case or they'll be rolling their own scripts.
I'm actually surprised someone hasn't made a tool like this for jQuery. I know jQuery and jQueryUI have basic animation support and likely some plugins that build and extend those features, but a dedicated tool for creating advanced timeline and event based animations would be amazing.
I'm actually surprised someone hasn't made a tool like this for jQuery. I know jQuery and jQueryUI have basic animation support and likely some plugins that build and extend those features, but a dedicated tool for creating advanced timeline and event based animations would be amazing.
Until we get rid of most IE versions, we can't really reliably produce animation in web applications. I have built a very simple image cross-fade effect. I most of my time making it IE compatible.
I would guess it depends what type of animation you're trying to tackle. jQuery has some pretty slick animation capabilities and it supports IE 6.0+.
My point, though not complaint, was that it's more geared towards executing a single animation against a single DOM element or a group of DOM elements. This is incredibly powerful, but when you want to start chaining animations, or "firing" off additional animations when you're mid cycle on your first animation - it gets tricky.
For example doing something like...
$("#myDiv").animate({top: 50}, 1000, function(){ $("#myDiv").animate({left: 50}, 1000) });
Would move "myDiv" down from 0 to 50 over 1 second and then move it right from 0 to 50 over 1 second. But if I wanted to trigger the left -> right animation midway between the top -> bottom animation there isn't an easy way to do that as far as I know. Currently you'd have to create two top -> bottom animations and split up the distance and duration so you can interject the secondary animation.
$("#myDiv").animate({top: 25}, 500, function(){ $("#myDiv").animate({left: 50}, 1000); $("#myDiv").animate({top: 50}, 500) });
That or just execute the 2nd one with a timeout independent of the first...
$("#myDiv").animate({top: 50}, 1000); window.setTimeout($("#myDiv").animate({left: 50}, 1000), 500);
Neither of those "solutions" are terribly difficult, but it gets more and more complex when you start building on it. If Adobe's EDGE or another set of tools would give you the ability to do this easily, I'd happily pay for it. Anyway, I suppose I'm getting off topic. :)
My point, though not complaint, was that it's more geared towards executing a single animation against a single DOM element or a group of DOM elements. This is incredibly powerful, but when you want to start chaining animations, or "firing" off additional animations when you're mid cycle on your first animation - it gets tricky.
For example doing something like...
$("#myDiv").animate({top: 50}, 1000, function(){ $("#myDiv").animate({left: 50}, 1000) });
Would move "myDiv" down from 0 to 50 over 1 second and then move it right from 0 to 50 over 1 second. But if I wanted to trigger the left -> right animation midway between the top -> bottom animation there isn't an easy way to do that as far as I know. Currently you'd have to create two top -> bottom animations and split up the distance and duration so you can interject the secondary animation.
$("#myDiv").animate({top: 25}, 500, function(){ $("#myDiv").animate({left: 50}, 1000); $("#myDiv").animate({top: 50}, 500) });
That or just execute the 2nd one with a timeout independent of the first...
$("#myDiv").animate({top: 50}, 1000); window.setTimeout($("#myDiv").animate({left: 50}, 1000), 500);
Neither of those "solutions" are terribly difficult, but it gets more and more complex when you start building on it. If Adobe's EDGE or another set of tools would give you the ability to do this easily, I'd happily pay for it. Anyway, I suppose I'm getting off topic. :)
My issue was this: when I have set the ocacity/trasnparency of an element, in IE6 it did not effect the child elements, which was a real pain to fix. I also had very hard time with aligning elements on top of each other and avoiding CSS rules that behave differently in IE and non-IE browsers.
TL;DR: Doing animations in web applications is hard for all the wrong reasons.
TL;DR: Doing animations in web applications is hard for all the wrong reasons.
[deleted](1)
For animation, it already looks leagues better than the half-baked attempt at adapting After Effects' timeline to the Flash environment in CS4 and CS5.