I am trying to simulate a mouse animation. I would like to dynamically set the position, then move it with a css transition. So far I am able to get a program that moves the mouse. However, I am having trouble setting the initial position dynamically with javascript. My code looks like this:

Here is the CSS

.cursorDiv {
  width: 30px;
  height: 30px;
  transform: translate(0px,0px);
  transition: 2s ease;
}

.cursorDivMoved {
  transform: translate(100px,200px);
}

Here is the javascript:

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="                    style/512/cursor.png";
document.body.appendChild(cursorDiv);

setTimeout(function() {
  $(".cursorDiv").toggleClass("cursorDivMoved");
}, 1000);

//cursorDiv.style.transform="translate(100px,50px)";

When I run this it works fine. However, when I try to change the initial position with javascript (unment last line), then the transition doesn't occur anymore.

Here is a Demo:

/

I am trying to simulate a mouse animation. I would like to dynamically set the position, then move it with a css transition. So far I am able to get a program that moves the mouse. However, I am having trouble setting the initial position dynamically with javascript. My code looks like this:

Here is the CSS

.cursorDiv {
  width: 30px;
  height: 30px;
  transform: translate(0px,0px);
  transition: 2s ease;
}

.cursorDivMoved {
  transform: translate(100px,200px);
}

Here is the javascript:

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder./data/icons/windows-8-metro-                    style/512/cursor.png";
document.body.appendChild(cursorDiv);

setTimeout(function() {
  $(".cursorDiv").toggleClass("cursorDivMoved");
}, 1000);

//cursorDiv.style.transform="translate(100px,50px)";

When I run this it works fine. However, when I try to change the initial position with javascript (unment last line), then the transition doesn't occur anymore.

Here is a Demo:

https://jsfiddle/fmt1rbsy/5/

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 22, 2015 at 2:27 user1763510 asked Nov 22, 2015 at 2:13 user1763510user1763510 1,28022 gold badges1818 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

If you programmatically set the style.transform property directly on your element (which you need if you want to move it to an arbitrary position through JS), it will override any transform specified in classes. Hence adding "cursorDivMoved" class later on does not transform (translate / move) it.

You have to continue moving it by specifying its style.transform property, or simply remove it: cursorDiv.style.transform = null

Demo: https://jsfiddle/fmt1rbsy/9/

You may also want to have the very first translate being transitioned. In that case, you have to wait for the browser to make an initial layout with your element at its start position, otherwise it will see no transition (it will see it directly after the transform is applied, i.e. at its final position). You can either:

• Use a small (but non zero) setTimeout to give some time for the browser to do its initial layout.
• Force a browser layout by trying to access some property that require the browser to pute the page layout (e.g. document.body.offsetWidth).
• Use 2 nested requestAnimationFrame's before applying your transform.

Demo: https://jsfiddle/fmt1rbsy/8/

Is this what you are looking for? Tell me if it can be improved. Open your console and change the class name to cursorDivMoved.

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.id = 'cursorDiv';
cursorDiv.src = "https://cdn2.iconfinder./data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);

#cursorDiv {
width:30px;
height:30px;
-o-transition: 2s ease;
-moz-transition: 2s ease;
-webkit-transition: 2s ease;
-ms-transition: 2s ease;
transition: 2s ease;
}
.cursorDivMoved {
-o-transform:translate(100px, 200px);
-moz-transform:translate(100px, 200px);
-webkit-transform:translate(100px, 200px);
-ms-transform:translate(100px, 200px);
transform:translate(100px, 200px);
}

You can define initial postion (x,y), and then when user click the position will increase and set to the 'cursorDiv', such as:

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder./data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);
var x = 100, y = 50;
setTimeout(function() {
  cursorDiv.style.transform="translate(100px,50px)";
}, 1000);

$(document).click(function () {
    x+= 20;
            y += 50;
    var str = "translate(" + x + "px," + y + "px)";
    cursorDiv.style.transform=str;
        });

Here is Demo