SOURCE CODE: Animate Position in JavaScript
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Animate Position in JavaScript | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation Uize.Fx"/>
  <meta name="description" content="See how to animate the position of an HTML element and how to apply amazingly realistic motion effects like easing, elasticity, bounce, and many more."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.tabs.css"/>
  <link rel="stylesheet" href="css/selector-links.css"/>
  <link rel="stylesheet" href="css/params-table.css"/>
  <link rel="stylesheet" href="css/params-inspector.css"/>
  <style type="text/css">
    #page-paramsInspector .tabShell {
      width: 400px;
    }
    #page_paramsInspector_curve {
      width: 320px;
      height: 251px;
      font-size: 12px;
    }
    #page_paramsInspector_preview {
      width: 386px;
    }
    .previewPaneShell {
      position: relative;
      width: 300px;
      height: 300px;
      border-width: 30px;
      border-style: solid;
      cursor: not-allowed;
    }
    .previewPane, .previewPaneEventGrabber {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .previewPane {
      background: url(../images/brushed-metal.jpg) no-repeat;
    }
    .previewPaneEventGrabber {
      cursor: crosshair;
    }
    .objectToAnimate {
      position: absolute;
      width: 48px;
      height: 48px;
      left: 0;
      top: 0;
      background: url(images/silver-sphere.png) no-repeat;
    }
    .objectToAnimateGhost {
      opacity: .2;
      filter: alpha(opacity=20);
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Animate Position in JavaScript
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/animate-position-in-javascript.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, the <code>Uize.Fx.fadeStyle</code> method of the <a href="../reference/Uize.Fx.html"><code>Uize.Fx</code></a> module is animating the position of a silver sphere. Click anywhere on the brushed metal square and the sphere will move to that position. How the sphere moves is decided by the curve(s) used by the <code>Uize.Fx.fadeStyle</code> method. You can change the curve(s) by clicking on one of the links in the <b>"PRESETS"</b> tab. When you choose a preset, a random target position will be chosen for the sphere, and the sphere will then animate to that position using the new curve(s). To animate the sphere again, click a preset link repeatedly, or click the <b>"PREVIEW ANIMATION"</b> button repeatedly, or click anywhere on the metal square. To fool around with the settings for a preset, switch over to the <b>"PARAMS"</b> tab to tweak values and click the <b>"PREVIEW ANIMATION"</b> button to preview changes.</p>
  </div>

  <!-- page layout's "wireframe" with slot for params inspector -->

  <table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
    <tr valign="top">
      <td>
        <div class="previewPaneShell insetBorderColor">
          <div id="page-previewPane" class="previewPane">
            <div id="page-objectToAnimateGhost" class="objectToAnimate objectToAnimateGhost"></div>
            <div id="page-objectToAnimate" class="objectToAnimate"></div>
          </div>
          <div id="page-previewPaneEventGrabber" class="previewPaneEventGrabber"></div>
        </div>
      </td>
      <td id="page-paramsInspector"></td>
    </tr>
  </table>
</div>

<textarea id="page_paramsInspector-inlinePresets" style="display:none;">

Linear
  curve: null
  duration: 300

Picking Up Speed
  curve: Uize.Curve.easeInPow (4)
  duration: 500

Really Slow to Get Started
  curve: Uize.Curve.easeInPow (10)
  duration: 1000

Decelerating Towards the End
  curve: Uize.Curve.easeOutPow (4)
  duration: 500

Decelerating to a Crawl at the End
  curve: Uize.Curve.easeOutPow (10)
  duration: 3000

Starting Off Slow, Decelerating Towards the End
  curve: Uize.Curve.easeInOutPow (7)
  duration: 1000

Taking a Breather in the Middle
  curve: Uize.Curve.easeMiddlePow (4)
  duration: 800

Pull Back First
  curve: Uize.Curve.Rubber.easeInBack (2)
  duration: 600

Overshoot at the End
  curve: Uize.Curve.Rubber.easeOutBack (2)
  duration: 600

Pull Back First, Then Overshoot at the End
  curve: Uize.Curve.Rubber.easeInOutBack (3)
  duration: 800

Gentle Elastic Ease Out
  curve: Uize.Curve.Rubber.easeOutElastic (.3)
  duration: 1500

Super Elastic Ease Out
  curve: Uize.Curve.Rubber.easeOutElastic (.1)
  duration: 1500

Loose and Sloppy Elastic
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.Rubber.easeOutElastic (.2),
      Uize.Curve.Rubber.easeOutElastic (.1)
    )
  duration: 2800

Pull and Release
  curve::
    Uize.Curve.Mod.repeat (
      [
        Uize.Curve.Mod.band (
          Uize.Curve.easeOutPow (5),
          1,
          0,
          -.3,
          0
        ),
        Uize.Curve.Rubber.easeOutElastic (.1)
      ],
      2
    )
  duration: 2200

Muffled Bounce
  curve: Uize.Curve.Rubber.easeOutBounce (3,-4,1.7)
  duration: 800

More Bouncy
  curve: Uize.Curve.Rubber.easeOutBounce (4,1.5)
  duration: 1200

Super Bouncy
  curve: Uize.Curve.Rubber.easeOutBounce (9,4,1.25)
  duration: 2000

Coin Settle Effect
  curve::
    Uize.Curve.Mod.bend (
      Uize.Curve.Mod.rotate (
        Uize.Curve.Mod.multiply (
          Uize.Curve.easeInPow (3),
          Uize.Curve.Mod.repeat (
            Uize.Curve.easeInCircular (),
            45,
            0,
            true
          )
        )
      ),
      2
    )
  duration: 4000

Decelerate Into Bounce
  curve::
    Uize.Curve.Mod.repeat (
      [
        Uize.Curve.easeInSweetPow (1/5),
        Uize.Curve.Rubber.easeOutBounce (4,2)
      ],
      2,
      1
    )
  duration: 1300

Ease Slowly Into Short Bounce
  curve::
    Uize.Curve.Mod.bend (
      Uize.Curve.Rubber.easeOutBounce (10,-2,2,2.5),
      Uize.Curve.easeInOutPow (2)
    )
  duration: 1500

Third Time's a Charm
  curve::
    Uize.Curve.Rubber.easeInBounce (
      3,
      1.3,
      1,
      Uize.Curve.easeInCircular ()
    )
  duration: 2000

Quickly to Middle, Pull Back, Then Quickly to End
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.easeInSweetPow (1/6),
      Uize.Curve.easeOutSweetPow (1/12),
      Uize.Curve.line (0,1)
    )
  duration: 1100

Stop and Go, Stop and Go, Stop and Go
  curve::
    Uize.Curve.Mod.repeat (
      Uize.Curve.easeInOutPow (3),
      3,
      1
    )
  duration: 1200

Wobbling on its Way
  curve::
    Uize.Curve.Mod.redraw (
      Uize.Curve.easeInOutPow (4),
      12,
      Uize.Curve.Rubber.easeInOutBack (4)
    )
  duration: 1700

Bouncing on its Way
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.easeInPow (3),
      Uize.Curve.easeOutPow (1.5),
      Uize.Curve.Rubber.easeOutBounce (10,4,1.1)
    )
  duration: 3000

Hopping on its Way
  curve::
    Uize.Curve.Mod.blend (
      Uize.Curve.Mod.band (1,1,0,.8,0),
      Uize.Curve.Mod.band (1,1,0,.8,1),
      Uize.Curve.Rubber.easeOutBounce (
        6,
        Uize.Curve.Mod.band (1,0,0),
        1,
        -2
      )
    )
  duration: 2500

Horizontal First, Then Vertical
  curve::
    {
      left:Uize.Curve.easeOutPow (10),
      top:Uize.Curve.easeInPow (10)
    }
  duration: 500

Vertical First, Then Horizontal
  curve::
    {
      left:Uize.Curve.easeInPow (10),
      top:Uize.Curve.easeOutPow (10)
    }
  duration: 500

Elastic Horizontal First, Then Vertical
  curve::
    {
      left:
        Uize.Curve.Rubber.easeOutElastic (.5,2),
      top:
        Uize.Curve.Rubber.easeInElastic (.5,1.5)
    }
  duration: 750

Elastic Vertical First, Then Horizontal
  curve::
    {
      left:
        Uize.Curve.Rubber.easeInElastic (.5,1.5),
      top:
        Uize.Curve.Rubber.easeOutElastic (.5,2)
    }
  duration: 750

Snappy Elastic Vertical First, Then Horizontal
  curve::
    {
      left:
        Uize.Curve.Rubber.easeInElastic (1.2),
      top:
        Uize.Curve.Rubber.easeInOutElastic (.5)
    }
  duration: 500

Waddling Along
  curve::
    {
      left:
        Uize.Curve.Mod.repeat (
          Uize.Curve.easeInOutPow (3),
          3,
          1
        ),
      top:
        Uize.Curve.Mod.repeat (
          Uize.Curve.easeInOutPow (4),
          5,
          1
        )
    }
  duration: 1200

Spastic Side-to-side Wobbling
  curve::
    {
      left:
        Uize.Curve.Mod.redraw (
          Uize.Curve.easeInOutPow (4),
          12,
          Uize.Curve.Rubber.easeInOutBack (4)
        ),
      top:
        Uize.Curve.Mod.redraw (
          Uize.Curve.easeInOutPow (5),
          14,
          Uize.Curve.Rubber.easeInOutBack (4)
        )
    }
  duration: 1700

Eccentric Elasticity Pounce
  curve::
    {
      left:
        Uize.Curve.easeOutPow (10),
      top:
        Uize.Curve.Rubber.easeOutElastic ()
    }
  duration: 500

Crazy Fly Buzzing Around
  curve::
    {
      left:
        Uize.Curve.Rubber.easeOutBounce (4,3,1.5),
      top:
        Uize.Curve.Rubber.easeOutBounce (5,4,1)
    }
  duration: 750

Diagonal Staircase
  curve::
    {
      left:
        Uize.Curve.Mod.repeat (
          Uize.Curve.Mod.band (1,.4,0),
          4,
          1
        ),
      top:
        Uize.Curve.Mod.repeat (
          Uize.Curve.Mod.band (1,.4,1),
          4,
          1
        )
    }
  duration: 1400

Bouncing Along Diagonal Staircase
  curve::
    {
      left:Uize.Curve.easeOutPow (3),
      top:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,1.4)
        )
    }
  duration: 3000

Pinball Bouncing Off the Bumpers
  curve::
    {
      left:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,1.5)
        ),
      top:
        Uize.Curve.Mod.blend (
          Uize.Curve.easeInPow (3),
          Uize.Curve.easeOutPow (5),
          Uize.Curve.Rubber.easeOutBounce (10,3,.5)
        )
    }
  duration: 3000

Twist Around and Turn Back
  curve::
    {
      left:Uize.Curve.Rubber.easeOutBack (4),
      top:Uize.Curve.Rubber.easeInBack (4)
    }
  duration: 700

Double Twist Around
  curve::
    {
      left:Uize.Curve.Rubber.easeMiddleBack (5),
      top:Uize.Curve.Rubber.easeInOutBack (5)
    }
  duration: 1200

Ease Into Accelerating Twirls
  curve::
    {
      left:
        Uize.Curve.Mod.bend (
          Uize.Curve.Mod.blend (
            Uize.Curve.Mod.repeat (
              Uize.Curve.easeInOutCircular (),
              5,
              0,
              true,
              false
            ),
            1,
            .5
          ),
          3
        ),
      top:
        Uize.Curve.Mod.bend (
          Uize.Curve.Mod.blend (
            Uize.Curve.Mod.repeat (
              Uize.Curve.easeInOutCircular (),
              5,
              0,
              true,
              false
            ),
            1,
            .5
          ),
          4
        )
    }
  duration: 1200

</textarea>

<!-- JavaScript code to make the static HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'UizeSite.ParamsInspector.InlinePresets',
    'Uize.Curve',
    'Uize.Curve.Rubber',
    'Uize.Curve.Mod',
    'Uize.Fx',
    'Uize.Json',
    'Uize.Dom.Pos'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** code for positioning ghost ***/
      function positionGhost (centerCoords) {
        var ghostDims = Uize.Dom.Pos.getDimensions (page.getNode ('objectToAnimateGhost'));
        page.setNodeStyle (
          'objectToAnimateGhost',
          {
            left:centerCoords.x - (ghostDims.width >> 1),
            top:centerCoords.y - (ghostDims.height >> 1)
          }
        );
      }

    /*** create the params inspector widget ***/
      var
        lastCurve,
        curveObject,
        values
      ;
      function fadePosition (centerCoords) {
        positionGhost (centerCoords);
        var
          curve = (values = page.children.paramsInspector.getValues ()).curve,
          objectDims = Uize.Dom.Pos.getDimensions (page.getNode ('objectToAnimate'))
        ;
        Uize.Fx.fadeStyle (
          page.getNode ('objectToAnimate'),
          null,
          {
            left:centerCoords.x - (objectDims.width >> 1),
            top:centerCoords.y - (objectDims.height >> 1)
          },
          +values.duration,
          {curve:curve == lastCurve ? curveObject : (curveObject = Uize.Json.from (lastCurve = curve))}
        );
      }
      page.addChild (
        'paramsInspector',
        UizeSite.ParamsInspector.InlinePresets,
        {
          params:{curve:'string-multiline',duration:'integer'},
          previewButtonText:'PREVIEW ANIMATION',
          settingsPropertyName:'curve'
        }
      ).wire (
        'Preset Selected',
        function () {
          var previewPaneCoords = Uize.Dom.Pos.getCoords (page.getNode ('previewPane'));
          fadePosition ({
            x:Math.round (Math.random () * previewPaneCoords.width),
            y:Math.round (Math.random () * previewPaneCoords.height)
          });
        }
      );

    /*** wire clicking on preview pane to trigger animation to new position ***/
      function getPositionPropertiesFromEvent () {
        var
          eventAbsPos = Uize.Dom.Pos.getEventAbsPos (),
          previewPaneCoords = Uize.Dom.Pos.getCoords (page.getNode ('previewPane'))
        ;
        return {x:eventAbsPos.left - previewPaneCoords.left,y:eventAbsPos.top - previewPaneCoords.top};
      }
      page.wireNode (
        'previewPaneEventGrabber',
        {
          click:function () {fadePosition (getPositionPropertiesFromEvent ())},
          mousemove:function () {positionGhost (getPositionPropertiesFromEvent ())}
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>