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.

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.

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:

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

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:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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