YUI Gallery Effects

The "gallery-effects" module is meant to provide a simple framework and API for using the YUI 3 Anim utility that will allow you to quickly and easily animate nodes. The motivation comes from both jQuery and Scriptaculous, but you'll see that the framework and API are derived from Scriptaculous (heck, even the examples are taken from their documentation). The goal is to make animation with YUI as easy, if not easier, than with other JavaScript libraries.

Also, an important note is that this has been tested on all Yahoo! Grade-A browsers, so it'll "just work" and you don't have to worry about it only working in a subset of browsers. So feel free to start using it right away.

Click here to jump to list of effects...

First, an example usage

To start, here's a quick example along with some code that will move this red rectangle to the right and then fade it out.


  
  
  <ul>
    <li><a href="#">Click here  for a demo!</a></li>
    <li><a href="#">Reset</a></li>
  </ul>


<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

<script type="text/javascript">
    YUI({
      modules: {
        "gallery-effects": {
          fullpath: "http://projects.sophomoredev.com/media/system/js/yui3-gallery/gallery-effects/gallery-effects-min.js",
          requires: ["node", "anim", "async-queue", "base"]
        }
      }
    }).use("gallery-effects", function (Y) {
    
      Y.get("#main_run").on("click", function (event) {
        Y.get("#main_demo").move({ x: 300 }).fade();
    
        event.halt();
      });
    
      Y.get("#main_reset").on("click", function (event) {
        Y.get("#main_demo").setStyles({ position: "static",  left: 0, top: 0 }).show();
    
        event.halt();
      });
    
    });
</script>

As this example highlights, there are two things you need to use the "gallery-effects" module: (1) The core YUI JavaScript file and (2) the YUI use statement block with the path to the "gallery-effects" module. The last bit will only be necessary until this module is pushed out to the Yahoo! CDN. If you'd like to download the source yourself, you can see the Github repository or pull the file from here.

`Y.DOM` and `Y.Node` Helper Methods

As a basis for the effects framework, there are a number of helper methods that the "gallery-effects" module adds to the Y.DOM object and Y.Node class. These include simple helpers for showing and hiding nodes. Documentation for these methods can be found here.

Effects Framework

Common configuration properties

There are a number of configuration properties that all effects share in common. Many of these properties are affect the animation this effect executes and are taken from and passed to the Y.Anim instance. The available properties are listed below:

Properties	Description
direction	The direction of the animation. Can either be "normal" or "alternate," in which case the animation will be normal on odd iterations and reversed on even interations. (`Y.Anim` defaults to `"normal"`, see YUI 3 Anim documentation for more.)
easing	The easing methodology to be used with the animation. (`Y.Anim` defaults to `Y.Anim.DEFAULT_EASING`, see YUI 3 Anim documentation for more.)
iterations	The number of iterations to run the animation. (`Y.Anim` defaults to `1`, see YUI 3 Anim documentation for more.)
managed	Whether this animation will be managed outside of the effect framework. If set to `true`, it is the creator's responsibility to make sure the `run` and `finish` methods are called. In most cases, you don't need to worry about this option and can allow the effect framework handle the execution. However, sometimes you'll want to manage the execution and in that case this option will allow you to do so. (Defaults to `false`.)
node	The node on which the effect will take place. This is required and can either be a `Y.Node` instance or a selector.
reverse	Whether the animation should be executed in reverse. (`Y.Anim` defaults to `false`, see YUI 3 Anim documentation for more.)
scope	The scope of this effect. This determines which queue this effect is put in when effects should be ordered. (Defaults to `"global"`.)
wait	Whether this animation should wait to complete before beginning the execution of the next effect in the queue. (Defaults to `true`.)

Common events

There are a number of events an effect publish that you can subscribe to.

Event	Description
beforeStart	Fires right before the effect is added to an event queue to be processed. This event will not fire if `managed` is set to `true`.
beforeSetup	Fires before the `setup` method is called. This typically allows effects that make use of the core effects to setup the animation or node before the core effect alters it. Often effects will use this method to parse and finalize the configuration of the animation instance so that the configuration properties reflect the latest state of the node.
afterSetup	Fires after the `setup` method is called.
beforeFinish	Fires before the `finish` method is called.
afterFinish	Fires after the `finish` method is called. This typicaly allows effects to alter the state or style of a node once the animation and/or effect is complete.

When subscribing to these events, it's frequently the case that you need to subscribe to the events when the effect is created because the effect is immediately executed and subscribing afterwards may be too late. Luckily, there is a solution to this. Functions can automatically be attached to events by passing them in as part of the configuration, keyed by the event name. The following below would subscribe to the afterFinish event of the created animation:

// Change the font color of #nodeToMorph to white and the background color to black.  Let the user know when it's done.
var effect = new Y.Effects.Morph({
  node: "#nodeToMorph"
  to: {
    color: white,
    backgroundColor: black
  },
  afterFinish: function () {
    alert("All done!");
  }
});

Core Effects

There are six core effects that can then be used to build more complex interactions. Click on any of the links below to see examples or browse the documentation.

Combination Effects

< Prev

Sophomore Dev Projects