Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Animation Utility: Animating Along a Curved Path

# Animation Utility: Animating Along a Curved Path

This demonstrates how to use the YUI Animation to animate along a curved path. Click the button to begin the demo.

View example in new window.

## Animating Motion Along a Curved Path

The YUI Animation Utility allows you to animate the motion of an HTMLElement along a curved path using control points.

The first thing we need to do is load the Animation source file and dependencies:

<script type="text/javascript" src="../../../2.x/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../../../2.x/build/dom/dom.js"></script> <script type="text/javascript" src="../../../2.x/build/event/event.js"></script> <script type="text/javascript" src="../../../2.x/build/animation/animation.js"></script>

For this example, we will animate the position of a `<div>` element named `demo`. The `points` attribute, introduced in the `YAHOO.util.Motion` subclass, accepts an optional `control` field of one or more control points

Add a little style so that we can see the animation in action:

<style type="text/css"> #demo { background:#ccc; height:30px; width:30px; } </style>

Create the `demo` element and a button to run the animation:

<div id="demo">Demo</div> <button id="demo-run">run</button>

Now we create an instance of `YAHOO.util.Motion`, passing it the element we wish to animate, and the points attribute (an array of [x, y] positions), with the point we are animating to, and the control points that will influence the path:

<script type="text/javascript"> var attributes = { points: { to: [600, 10], control: [ [100, 100], [800, 800] ] } }; var anim = new YAHOO.util.Motion('demo', attributes); </script> <p>The final step is to call the <code>animate</code> method on our instance to start the animation. The button will be the trigger that begins the animation sequence:</p> <textarea name="code" class="JScript" cols="60" rows="1"> <script type="text/javascript"> YAHOO.util.Event.on('demo-run', 'click', function() { anim.animate(); }); </script>

This is an example of animating the motion HTMLElement along a curved path.

### Animation Utility Examples:

- Basic Animation
- Animation Easing
- Animating From a Given Value
- Using Custom Units for an Animation
- Animating Multiple Attributes
- Animating Colors
- Animating Motion
- Animating Along a Curved Path
- Animated Scrolling

### More Animation Utility Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

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