O'Reilly logo

Moodle JavaScript Cookbook by Alastair Hole

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Moving an element along a curved path

Another way to animate motion of an element from one position to another is to use a curve motion animation. The curve is specified as a matrix of X and Y coordinates which the element's motion will follow.

In this recipe, we will move a div across a simple curve, with two sets of X and Y coordinates in the matrix list.

Here, we can see the key steps in this animation by looking at a selection of frames:

Moving an element along a curved path
Moving an element along a curved path
Moving an element along a curved path

How to do ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required