+
+
+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.
+
+
+
+
+
+
+ Easing Effects
+ - +
+
+Click the icon in the header to shrink the element's height to zero with the "backIn" effect.
+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.
+ +<div id="demo" class="yui3-module"> + <div class="yui3-hd"> + <h3>Easing Effects</h3> + <a title="collapse element" class="yui3-toggle"><em>-</em></a> + </div> + <div class="yui3-bd"> + <p>Click the icon in the header to shrink the element's height to zero with the "backIn" effect.</p> + </div> +</div> +<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>+ + +
Creating the Anim Instance
+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.
var anim = new Y.Anim({
+ node: '#demo .yui3-bd',
+ to: { height: 0 },
+ easing: 'backIn'
+});
+
+
+Running the Animation
+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);
+
+
+Complete Example Source
+<div id="demo" class="yui3-module">
+ <div class="yui3-hd">
+ <h3>Easing Effects</h3>
+ <a title="collapse element" class="yui3-toggle"><em>-</em></a>
+ </div>
+ <div class="yui3-bd">
+ <p>Click the icon in the header to shrink the element's height to zero with the "backIn" effect.</p>
+ </div>
+</div>
+<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>
+
+
+<script type="text/javascript">
+YUI().use('anim', function(Y) {
+ var anim = new Y.Anim({
+ node: '#demo .yui3-bd',
+ to: { height: 0 },
+ easing: 'backIn'
+ });
+
+ var onClick = function(e) {
+ e.preventDefault();
+ anim.run();
+ };
+ Y.one('#demo .yui3-toggle').on('click', onClick);
+
+});
+
+</script>
+
+