235N/A<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">

235N/A<div class="intro">

822N/A <p>This demonstrates how to use the <code>easing</code> attribute to change the behavior of the animation.</p>

822N/A <p> Click the icon in the header to shrink the element's <code>height</code> to zero with the "backIn" effect.</p>

822N/A</div>

235N/A

911N/A<div class="example">

810N/A{{>easing-source}}

235N/A</div>

235N/A

235N/A<h2>Setting up the HTML</h2>

235N/A<p>First we add some HTML to animate.</p>

235N/A

235N/A```

235N/A{{>easing-source-html}}

235N/A```

235N/A

235N/A<h2>Creating the Anim Instance</h2>

235N/A<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the final properties and their values.</p>

235N/A

235N/A```

235N/Avar anim = new Y.Anim({

235N/A node: '#demo .yui3-bd',

235N/A to: { height: 0 },

235N/A easing: 'backIn'

235N/A});

235N/A```

235N/A

235N/A<h2>Running the Animation</h2>

235N/A<p>Finally we add an event handler to run the animation.</p>

235N/A```

235N/Avar onClick = function(e) {

235N/A e.preventDefault();

235N/A anim.run();

235N/A};

235N/AY.one('#demo .yui3-toggle').on('click', onClick);

235N/A```

822N/A

235N/A<h2>Complete Example Source</h2>

235N/A```

822N/A{{>easing-source}}

235N/A```

911N/A