MooTools 1.3 Cookbook

Making a golf ball ease up to a hole and stop

Using transitions to animate image movement on the screen is great fun and, it works on the iPhone.

Getting ready

Prepare three images: the golf green, the golf ball, and the golf ball's shadow.

<div id="green"></div> <style type="text/css"> #green { margin:0 auto; background:transparent url('08_golf_green.jpg') no-repeat 0 0; width:500px; height:500px; } </style> <script type="text/javascript"> // inject the ball var ball = new Element('img',{ id: 'ball', src: '08_golf_ball.png', style: 'width:10px; position:absolute;', morph: { link:'chain', transition:'linear' } }).inject('green','top'); // inject ...