YUI 3.x Home -

YUI Library Examples: Animation: Animating XY Position

Animation: Animating XY Position

This demonstrates how to animate the xy position of an element.

Click anywhere to move the element to your click position.

Setting up the HTML

First we add some HTML to animate.

  1. <div id="demo" class="yui-module">
  2. <div class="yui-hd">
  3. <h4>Animation Demo</h4>
  4. <a title="remove module" class="yui-remove"><em>x</em></a>
  5. </div>
  6. <div class="yui-bd">
  7. <p>This an example of what you can do with the YUI Animation Utility.</p>
  8. <p><em>Follow the instructions above to see the animation in action.</em></p>
  9. </div>
  10. </div>
<div id="demo" class="yui-module">
    <div class="yui-hd">
        <h4>Animation Demo</h4>
        <a title="remove module" class="yui-remove"><em>x</em></a>
    </div>
    <div class="yui-bd">
        <p>This an example of what you can do with the YUI Animation Utility.</p>
        <p><em>Follow the instructions above to see the animation in action.</em></p>
    </div>
</div>

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. We will set the to attribute later when then animation runs.

  1. var anim = new Y.Anim({
  2. node: '#demo',
  3. duration: 0.5,
  4. easing: Y.Easing.elasticOut
  5. });
var anim = new Y.Anim({
    node: '#demo',
    duration: 0.5,
    easing: Y.Easing.elasticOut
});

Changing Attributes

Next we need a click handler to set the to attribute for the xy behavior and run the animation.

  1. var onClick = function(e) {
  2. anim.set('to', { xy: [e.pageX, e.pageY] });
  3. anim.run();
  4. };
var onClick = function(e) {
    anim.set('to', { xy: [e.pageX, e.pageY] });
    anim.run();
};

Running the Animation

Finally we add an event handler to run the animation when the document is clicked.

  1. Y.get('document').on('click', onClick);
Y.get('document').on('click', onClick);

Full Script Source

  1. YUI().use('anim', function(Y) {
  2. var anim = new Y.Anim({
  3. node: '#demo',
  4. duration: 0.5,
  5. easing: Y.Easing.elasticOut
  6. });
  7.  
  8. var onClick = function(e) {
  9. anim.set('to', { xy: [e.pageX, e.pageY] });
  10. anim.run();
  11. };
  12.  
  13. Y.get('document').on('click', onClick);
  14.  
  15. });
YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo',
        duration: 0.5,
        easing: Y.Easing.elasticOut
    });
 
    var onClick = function(e) {
        anim.set('to', { xy: [e.pageX, e.pageY] });
        anim.run();
    };
 
    Y.get('document').on('click', onClick);
 
});

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings