So I've been searching around for a js library that replicates reactjs animation features, but isn't attached to a larger lib (such as angular's ng-animate). I've seen a few standalones floating around, but most of them either lack features or their docs are terrible. Note, I'm trying not to make this a "what's the best lib" question to avoid opinion - I'm simply asking what's the closest standalone library to react's animation features (can depend on JQuery).
You're looking for the Greensock Animation Platform (GSAP) which is superior to pretty much every animation lib in existence.
Seriously. Nothing else is even close.
http://www.greensock.com/gsap-js/
Related
There's a speed test in greensock website comparing speed with other animations libraries, JQuery or Even CSS Transitions. It's benchmarking FPS by animating hundreds/thousands of perticles.
The FPS of greensock animations outnumbered everything else. Css transitions & JQuery is not much close to greensock.
I tried searching about greensock but couldn't find much useful information. Most of them aren't explained well.
I'm still a amateur in javascript. If I try to make my own JS animations, those won't be as fast as gsap. Not even close. So it would be great to know what happens underneath the hood. How they optimize that much!
Jack (the creator of GreenSock) tells how GSAP is so fast in this forum post among other places. To recap some of the points there:
Use highly optimized JavaScript across the board (this entails many things like using linked lists, local variables, quick lookup tables, inlining code, bitwise operators, leveraging prototypes instead of recreating functions/variables for each instance, etc.)
Engineer the structure of the platform so that it lends itself very well to high-pressure situations, minimizing function calls and making sure things are gc-friendly.
Make updates in a single update loop that's driven by requestAnimationFrame, only falling back to setTimeout() if necessary.
Cache some important values internally for faster updates.
For CSS transforms, we calculate matrix values and construct either a matrix() or matrix3d() when there's any rotation or skewing because our tests showed that it was faster.
There's no silver bullet that makes it fast. It just is smart in the way that it does things based on over a dozen years of experience.
I read something a while ago that said that CSS animations are faster than JS animations. Having used jQuery to do some animations I can see why some would say this, as jQuery animations are sometimes buggy and slow. What I would like to know however, is whether there is any hardcore truth in the argument?
There is a common misconception that CSS animations are faster than JS animations because of all the highfalutin buzz-words used whenever the topic is brought up. CSS animations are however much faster and more stable than jQuery animations, which is where a lot of people get this idea from. If you take a look at the GreenSock library for JS (the name should ring bells to old Flash WebDevs :v), it is considerably faster than jQuery, and more than a match for CSS animations.
If you take a look at this website and scroll down to the 'Performance comparison' section, you have a stress test that is indeed the basis of all of what I just said. I ran the test on a machine that has an Intel Core i7 3930K 3.2GHz processor and 8GB of RAM (Cannot tell what GPU).
When running the test, make sure to set the dots to 3000 and run tests on all three engines.
The jQuery engine could only render a single dot
The GreenSock engine was by far the most fluid
The CSS engine was good, but didn't seem as fluid as the GSAP engine
Obviously, should anyone disagree with the tests and information given, please state with references and data as to why you disagree
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/
jQuery animations seem to have better browser support, but the CSS3 Keyframes appear to be really fast and smooth yet not very good browser support.
I'd like to here people's opinion about jQuery or CSS3 in terms of:
Canvas Gaming:
I have seen a few CSS3 games which where pretty nice. Then again, when we are gaming with the Canvas we are already using Javascript and to do some quick and dirty stuff we might also include the jQuery Javacsript Library.
Or would we use both for Canvas Gaming? Not sure.
Websites:
For normal websites delivering content, not gaming: what would be a decent approach for animations on a regular Web Page?
I also hear stuff such as: CSS3 Animations slows down some jQuery Animations and other scripts on the page...hm.
To clear things up, I would just someone to explain some of the advantages of using CSS3 Animations or a jQuery Animation.
Any opinions would be nice, thanks!
The Mozilla developer documentation raises some interesting points regarding CSS3 animation:
Letting the browser control the animation sequence lets the browser
optimize performance and efficiency by, for example, reducing the
update frequency of animations running in tabs that aren't currently
visible.
WebKit also makes use of hardware accelerated compositing, which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.
It stands to reason browser vendors will only increase their support for this in the name of competition, and because the CSS3 standard is getting closer to completion.
My only concern would be the manageability of the code, although this could easily be managed with a decent translation layer. There are some excellent animation engines available in Javascript, although I haven't used or researched one recently to give an accurate estimate of performance.
For the part of your question Re: "Websites: For normal websites delivering content", you are going to want to interact with a server for some of that content. That interaction is going to be via ajax and, based on your question, jquery-based. Then consider some of your animations will be based on the exact data returned.
jQuery makes that kind of content-dependent animation so easy. In a "normal website delivering content" you would, logically, have much less animation than in a game - so performance / resource hogging is less of an issue.
I understand how JS is run and I think I understand most of the DOM but I've no idea about animation. Does anybody here know of a good guide that can explain to me how it's done in Javascript?
In addition, should I even consider Javascript for animation? Should I instead be looking to learn flash?
Avoid flash, its a horrible requirement, uncrawlable by Google, unsopported by a bunch of browsers and systems (eg iPhone) and most importantly: it forces you to reinvent web standards (e.g. scroll bars and whatnot), Javascript on the other hand is easier to maintain and code for in the noscript case.
try scriptaculous for your animations;
here's a quickie 3-line tutorial so
you can see it working
here's a more complete tutorial
here's the scriptaculous wiki
note that there are a gazillion JS animation libraries, some really good jQuery comes to mind. Usually they're just a script tag and an onclick event to setup.
Good luck!
/mp
if your animation is simple, change colors over time, move from x to y in 3 seconds. Javascript is fine. If you want all kinds of wizbang buttons and coordinated rotation of the screen, straight up js + dhtml will be clunky at best. Silverlight vs Flash are you questions at that point. Interestingly enough, you program Silverlight with javascript, and that would be the major benefit to simply upgrading to a faster and more dynamic DOM that is implemented in Silverlight but still writing the same code. Flash programmability is very limited in my experience, you can do anything, but it will be slow and take thousands of lines of code to get there. For simple JS animations look at jQuery or Scriptaculous.
Check out a JS animation framework like Bernard Sumption's Animator.js. It's pretty light-weight and has some excellent examples.
Personally, I wouldn't be animating things in JS. Flash FTW.
If you aren't concerned with IE support, you could also try experimenting with the canvas element:
MOZILLA DEVELOPER NETWORK Basic animations