This demonstrates how to use the iterations attribute to run multiple iterations of the animation.
Mouse over the link to begin the animation.
+First we add some HTML to animate.
+ +``` +hover me +``` + +Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate and the to attribute containing the final properties and their values.
Adding an iterations attribute of "infinite" means that the animation will run continuously.
The direction attribute of "alternate" means that the animation reverses every other iteration.
We don't want the animation running when the link is not hovered over, so we will change the animation attributes depending on whether or not we are over the link.
+We can use a single handler for both mouse the mouseOver and mouseOut events, and set the reverse attribute depending on which event fired.
Finally we add event handlers to run the animation.
+ +``` +node.on('mouseover', hover); +node.on('mouseout', hover); +``` + +This demonstrates how to animate the xy position of an element.
Click anywhere to move the element to your click position.
+First we add some HTML to animate.
+ +``` +This an example of what you can do with the YUI Animation Utility.
+Follow the instructions above to see the animation in action.
+Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate. We will set the to attribute later when then animation runs.
Next we need a click handler to set the to attribute for the xy behavior and run the animation.
Finally we add an event handler to run the animation when the document is clicked.
+ +``` +Y.one('document').on('click', onClick); +``` + +This demonstrates how to animate the opacity of an element.
Click the X in the header to fade the element out.
+First we add some HTML to animate.
+ +``` +This an example of what you can do with the YUI Animation Utility.
+Follow the instructions above to see the animation in action.
+Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate and the to attribute containing the final properties and their values.
Clicking the toggle control should start the animation, so we'll need to handle that click, including preventing the default action of following the url.
+ +``` +var onClick = function(e) { + e.preventDefault(); + anim.run(); +}; +``` + +Finally we add an event listener to run the animation.
+``` +Y.one('#demo .yui3-remove').on('click', onClick); +``` + +This demonstrates how to animate color attributes.
+Mouse over the link to begin the animation.
+First we add some HTML to animate.
+ +``` +hover me +``` + +Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate and the to attribute containing the final properties and their values.
Adding a from attribute allows us to reset the colors onmouseout using the reverse attribute, which we will see below.
Next we need a handler to run when the link is moused over, and reverse when moused out.
+``` +var hover = function(e) { + var reverse = false; + if (anim.get('running')) { + anim.pause(); + } + if (e.type === 'mouseout') { + reverse = true; + } + anim.set('reverse', reverse); + anim.run(); +}; +``` + +Finally we add an event handler to run the animation.
+``` +node.on('mouseover', hover); +node.on('mouseout', hover); +``` + +direction attribute can be used to reverse the animation on alternate iterations.",
+ "modules" : ["anim"],
+ "tags" : ["anim", "reverse", "iterations", "direction"],
+
+ "hideTableOfContents": true
+ },
+
+ {
+ "name" : "anim-xy",
+ "displayName": "Animating XY Position",
+ "description": "This example shows you how to animate the xy coordinates of an element.",
+ "modules" : ["anim"],
+ "tags" : ["anim", "xy", "position"],
+
+ "hideTableOfContents": true
+ },
+
+ {
+ "name" : "curve",
+ "displayName": "Animating Along a Curved Path",
+ "description": "This example demonstrates animating an element along a curved path using bezier control points.",
+ "modules" : ["anim"],
+ "tags" : ["anim", "xy", "position", "bezier"],
+
+ "hideTableOfContents": true
+ },
+
+ {
+ "name" : "reverse",
+ "displayName": "Reversing an Animation",
+ "description": "The reverse attribute allows you to change the run direction of an animation.",
+ "modules" : ["anim"],
+ "tags" : ["anim", "reverse", "plugin"],
+
+ "hideTableOfContents": true
+ },
+
+ {
+ "name" : "end-event",
+ "displayName": "Using the End Event",
+ "description": "This example demonstrates how to use the end event.",
+ "modules" : ["anim"],
+ "tags" : ["anim", "event", "end"],
+
+ "hideTableOfContents": true
+ },
+
+ {
+ "name" : "anim-chaining",
+ "displayName": "Chaining Animations Using the end Event",
+ "description": "Animations can be set to run sequentially using Animation's end event.",
+ "modules" : ["anim"],
+ "tags" : ["anim", "event", "end", "chain"],
+
+ "hideTableOfContents": true
+ }
+
+ ]
+}
diff --git a/src/anim/docs/curve.mustache b/src/anim/docs/curve.mustache
new file mode 100644
index 00000000000..80715506308
--- /dev/null
+++ b/src/anim/docs/curve.mustache
@@ -0,0 +1,52 @@
+
+This demonstrates how to animate the position of an element along a curve.
Click anywhere to move the element to your click position.
+First we add some HTML to animate.
+``` + +``` + +Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate.
A click handler will set the to value before run is called.
Finally we add an event handler to run the animation.
+ +``` +Y.one('document').on('click', onClick); +``` + +This demonstrates how to use the easing attribute to change the behavior of the animation.
Click the icon in the header to shrink the element's height to zero with the "backIn" effect.
First we add some HTML to animate.
+ +``` +This an example of what you can do with the YUI Animation Utility.
+Follow the instructions above to see the animation in action.
+Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate and the to attribute containing the final properties and their values.
Finally we add an event handler to run the animation.
+``` +var onClick = function(e) { + e.preventDefault(); + anim.run(); +}; +Y.one('#demo .yui3-toggle').on('click', onClick); +``` + +This demonstrates how to use the end event.
Click the X in the header to fade the element out and remove it from the document once the fade completes.
+First we add some HTML to animate.
+ +``` +This an example of what you can do with the YUI Animation Utility.
+Follow the instructions above to see the animation in action.
+Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate and the to attribute containing the properties to be transitioned and final values.
We will need a function to run when the end event fires. Note that the context of our handler defaults to anim, so this refers to our Anim instance inside the handler.
Now we will use the on method to subscribe to the end event, passing it our handler.
Finally we add an event handler to run the animation.
+``` +Y.one('#demo .yui3-remove').on('click', anim.run, anim); +``` + +The Anim Utility provides the ability to animate changes to style properties. Advanced easing equations are provided for more interesting animated effects.
+Your Animation implementation will consist of one or more instances of the Anim.
To create an Anim instance on your page, pass it a configuration object including the node or selector query for the node that you wish to animate and a to containing the properties you wish to animate.
To begin the actual animation, call the run method on your Anim instance.
See the API documentation for the Anim object for more information about its methods and properties.
+ +In addition to passing a configuration object to the Anim constructor, you can access the attributes of your Anim instance via the set and get methods.
A node attribute and a to attribute containing one or more properties to animate are the minimum requirements for running an animation.
The value of a to can optionally be a function. If a function is used, it receives the node as its only argument. The return value of the function becomes the to value for that run of the animation.
Use the optional from attribute to start the animation from a specific value. When from is omitted, the current value is used.
Like the to attribute, the value of a from property can optionally be a function. If a function is used, it receives the node as its only argument. The return value of the function becomes the from value for that run of the animation.
The Animation Utility defines events useful for hooking into the various stages of an animation. The on method is used to attach event listeners.
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.
+ + diff --git a/src/anim/docs/partials/anim-xy-source.mustache b/src/anim/docs/partials/anim-xy-source.mustache new file mode 100644 index 00000000000..9c3d3b2febd --- /dev/null +++ b/src/anim/docs/partials/anim-xy-source.mustache @@ -0,0 +1,20 @@ + + + diff --git a/src/anim/docs/partials/basic-source.mustache b/src/anim/docs/partials/basic-source.mustache new file mode 100644 index 00000000000..35876a2d643 --- /dev/null +++ b/src/anim/docs/partials/basic-source.mustache @@ -0,0 +1,29 @@ +This an example of what you can do with the YUI Animation Utility.
+Follow the instructions above to see the animation in action.
+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.
+ diff --git a/src/anim/docs/partials/end-event-source.mustache b/src/anim/docs/partials/end-event-source.mustache new file mode 100644 index 00000000000..0bc9152d5cf --- /dev/null +++ b/src/anim/docs/partials/end-event-source.mustache @@ -0,0 +1,30 @@ +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.
+ + diff --git a/src/anim/docs/partials/reverse-source.mustache b/src/anim/docs/partials/reverse-source.mustache new file mode 100644 index 00000000000..26bd32dc8d6 --- /dev/null +++ b/src/anim/docs/partials/reverse-source.mustache @@ -0,0 +1,47 @@ +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.
+ + diff --git a/src/anim/docs/reverse.mustache b/src/anim/docs/reverse.mustache new file mode 100644 index 00000000000..fd6c0171885 --- /dev/null +++ b/src/anim/docs/reverse.mustache @@ -0,0 +1,84 @@ + +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 height.
First we add some HTML to animate.
+ +``` +This an example of what you can do with the YUI Animation Utility.
+Follow the instructions above to see the animation in action.
+For this example, we will use Node's 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.
Setting the 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).
Because our behavior only works when JS is available, let's go ahead and add our control element using JS as well.
+ +``` +// use dynamic control for dynamic behavior +var control = Y.Node.create( + '' + + 'toggle' + + '' +); + +// append dynamic control to header section +module.one('.yui3-hd').appendChild(control); +``` + +Before calling run in our click handler, we will use the reverse attribute toggle the direction of the animation depending on whether its opening or closing.
Finally we add an event handler to run the animation.
+ +``` +module.one('.yui3-toggle').on('click', onClick); +``` + +