Gallery
Documentation
Tag Cloud
Andrew Bialecki
YUI Contributor
Last CDN Push: 05/21/10
Build Tag: gallery-2010.05.21-18-16
Project: YUI 3
License: YUI BSD
YUI Version: 3.0.0
Free for use.
The Animation utility is incredible. However, I've always wanted an animation API similar to Scriptaculous or jQuery so I could easily animate elements with a single function call. So, here we go. This is the beginning of introducing an API to mimic Scriptaculous into YUI 3 (see the example for what I mean).
To go along with effects, there are a number of helper methods that you'll want (e.g. showing and hiding nodes, etc.).
In addition to simpler method calls, I've also built-in support for animation effects to occur in serial or in parallel using the awesome AsyncQueue class in YUI 3.
Oh yah, it's also only 9.7K minified, so it's lightweight. Not sure about gzip, but it's gotta be less :)
And finally, I've tested all effects on all Grade-A browsers, so you can code with confidence that effects will "just work." If you notice any issues, don't hesitate to let me know.
Documentation
I'd start by checking out the documentation and of the examples at http://projects.sophomoredev.com/yui-gallery-effects/. It's still a bit of a work in progress, but you can see most of the examples and effects documented at this point. If something is missing or you have a question, definitely let me know.
If interested, also check out the Scriptaculous effects documentation (http://wiki.github.com/madrobby/scriptaculous/) for an idea of what's coming next.
Quick idea of what you can do below.
Code Sample
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.05.21-18-16'
}).use('gallery-effects', function(Y) {
// couple of helper methods you'll want
Y.get("#showMe").show();
Y.get("#hideMe").hide();
var node = Y.get("#myNode");
if (node.displayed()) {
node.toggle(); // if the node was being displayed, now it's hidden
}
// Equivalent of Effects.Appear
Y.get("#foo").appear();
// Equivalent of Effects.Morph
// change the width to 200px and the background color to red over 3 seconds
Y.get("#bar").morph({
style: { width: "200px", backgroundColor: "red" },
duration: 3
});
// the "wait" option tells the second animation to wait until the first is complete
// and then execute...oh yah, and everything's chainable.
Y.get("#baz")
.morph({ to: { width: "300px" }, wait: true })
.morph({ to: { height: "400px" } });
// and more to come...
});Forum Posts
| Subject | Author | Date |
|---|---|---|
| Node Data as a Plugin | Eric Ferraiuolo | 03/16/10 |
| Re: Node Data as a Plugin | Andrew Bialecki | 03/19/10 |
| Re: Node Data as a Plugin | Eric Ferraiuolo | 03/21/10 |
| Re: Node Data as a Plugin | Andrew Bialecki | 03/22/10 |
| Effects Events | Eric Ferraiuolo | 03/25/10 |
| Re: Effects Events | Andrew Bialecki | 03/30/10 |
| Updates/changes to the effects modules | Andrew Bialecki | 03/30/10 |
| How to cancel/stop an effect? | Simon Gilligan | 06/17/10 |
| Breaks in 3.3.0pr1 | Anthony Pipkin | 12/8/10 |
| Re: Breaks in 3.3.0pr1 | Adam Moore | 12/13/10 |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info