Animation Utility: Reversing an Animation
This demonstrates how to use the
reverse attribute to change the behavior of the animation.
Click the icon in the header to toggle the element's
This an example of what you can do with the YUI Animation Utility.
Follow the instructions above to see the animation in action.
This is placeholder text used to demonstrate how the above animation affects subsequent content.
Setting up the HTML
First we add some HTML to animate.
Using the NodeFX Plugin
For this example, we will use
fx plugin to animate the element. The plugin adds the anim instance to the
Node instance, pre-configuring it to use the Node instance as the
Anim's node. The
plug method accepts a class to construct and an optional config to pass to the constructor.
from attribute to the expanded height of the element allows us to toggle the effect using the
reverse attribute, which we will see below (
from uses current value when omitted).
Creating the Control Element
Because our behavior only works when JS is available, let's go ahead and add our control element using JS as well.
Toggling Animation Behavior
run in our
click handler, we will use the
reverse attribute toggle the direction of the animation depending on whether its opening or closing.
Running the Animation
Finally we add an event handler to run the animation.