CursorAnim.js examples

Basic examples of what you can accomplish with CursorAnim.js

Move

Move the cursor from its current position to another. The destination can be CSS selector or position coordinates {x,y}.

#div1 
[
  {
    "action": "move",
    "options": {
      "selector": "#div1",
      "duration": 800
    }
  },
  {
    "action": "move",
    "options": {
      "position": {
        "x": 300,
        "y": 600
      },
      "easing": "linear"
    }
  }
]

Click

Click on the last targetted element with CSS selector or under the position you gave.

[
  {
    "action": "move",
    "options": {
      "selector": "#button_div2"
    }
  },
  {
    "action": "click"
  }
]

Drag and drop

Drag a jQuery UI Draggable and drop it on jQuery UI Droppable. It supports the helper clone option.

Drag me
Clone
Drop here ! 
[
  {
    "action": "move",
    "options": {
      "selector": "#draggable"
    }
  },
  {
    "action": "drag"
  },
  {
    "action": "move",
    "options": {
      "selector": "#div4"
    }
  },
  {
    "action": "drop"
  }
]

Wait

Wait a certain amount of time in milliseconds.

#div5
#div6 
[
  {
    "action": "move",
    "options": {
      "selector": "#div5"
    }
  },
  {
    "action": "wait",
    "options": {
      "duration": 1000
    }
  },
  {
    "action": "move",
    "options": {
      "selector": "#div6"
    }
  }
]

Type

Type a text into text input or textarea during a certain amount of time.

[
  {
    "action": "move",
    "options": {
      "selector": "#inputdemo"
    }
  },
  {
    "action": "type",
    "options": {
        "strings": [
            "This is a vrey v",
            "This is a very very long sentence."
        ],
        "startDelay": 500
    }
  }
]