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.
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.
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:
|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. (
|easing||The easing methodology to be used with the animation. (
|iterations||The number of iterations to run the animation. (
|managed||Whether this animation will be managed outside of the effect framework. If set to
|node||The node on which the effect will take place. This is required and can either be a
|reverse||Whether the animation should be executed in reverse. (
|scope||The scope of this effect. This determines which queue this effect is put in when effects should be ordered. (Defaults to
|wait||Whether this animation should wait to complete before beginning the execution of the next effect in the queue. (Defaults to
There are a number of events an effect publish that you can subscribe to.
|beforeStart||Fires right before the effect is added to an event queue to be processed. This event will not fire if
|beforeSetup||Fires before the
|afterSetup||Fires after the
|beforeFinish||Fires before the
|afterFinish||Fires after the
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:
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.