We Keep Coding

How to reset rotation after onclick execution and make it possible to call it gain

I have a spinning arrows image. On click, it refreshes a captcha. I have it defined in a short css, with a rotation function called on click.
These are the CSS, the HTML and the Javascript:
function rotatearrow() {
arrowreload.style.webkitTransform = 'rotate(360deg)';
arrowreload.style.MozTransform = 'rotate(360deg)';
arrowreload.style.msTransform = 'rotate(360deg)';
}
function reloadcaptcha() {
//does what's needed and plays perfectly
}
.reload {
max-width: 32px;
height: auto;
transform: rotate(0);
transition: all 0.8s;
}
<img id="arrowreload" class="reload" src="../images/reload.png" onclick="rotatearrow(); reloadcaptcha();">
Now the point is: rotatearrow plays at the first click and rotate the arrows, but it never plays after the first time. What am I doing wrong? What changes I have to do to the code?

Every time you click you need to increment the degree:
let degree = 0;
function rotatearrow() {
degree += 360;
arrowreload.style.webkitTransform = `rotate(${degree}deg)`;
}
.reload {
max-width: 32px;
height: auto;
transform: rotate(0);
transition: all 0.8s;
}
<img id="arrowreload" class="reload" src="http://pluspng.com/img-png/triangle-png-triangle-png-clipart-2400.png" onclick="rotatearrow();">

This will work, we just need to keep incrementing the rotation value in multiples i.e -- 360,720,1080.....
function rotatearrow() {
var transformValue = document.getElementById('arrowreload').style.webkitTransform;
var transformInteger = transformValue ? ((transformValue.match(/\d+/g).map(Number)[0]/360)+1) : 1;
document.getElementById('arrowreload').style.webkitTransform = 'rotate('+(360*transformInteger)+'deg)';
}
Hope this is helpful, also this doesn't require external variable declaration...

How can I create an efficient infinitely looping waving text animation?

This is the effect I am trying to create (JSFiddle):
$('.header h1 span').each(function() { // each letter is contained inside a <span> element
var that = $(this);
setTimeout(function() {
that.animate({
top: "-10px"
}, animateTime / 2)
.animate({
top: "10px"
}, animateTime / 2);
}, that.index() * 100);
});
Result:
It appears to be successful. However, I ran into the problem of it looking like this after switching tabs, then coming back:
In the fiddle above, I've tried to "fix" this by making the animation stop when the tab is unfocused. It's better than when I WASN'T checking for tab unfocusing, but it still has problems. This is the code I'm using to do that:
var running = true;
document.addEventListener('visibilitychange', function(){
console.log("Running:" + running);
running = !document.hidden;
if(!running) clearQueues();
})
If the user spends less than a couple seconds unfocused from the tab, the animation looks like the second GIF again, and I don't see a way to avoid that. I've tried using requestAnimationFrame() but I can't figure out how to make it behave correctly.
So, my question is: how do I prevent the animation from being affected by the tab being unfocused?
Bonus points (figuratively) if you can help me make it more efficient on mobile, too.

I'm not sure if this solves the stuttering for you or not. This strategy is similar in concept to what you are doing, but uses CSS animation rather than js.
(function(){
var el = document.querySelectorAll(".wavey")[0];
var oldText = el.innerText
var newHtml = "";
for (var i in el.innerText) { newHtml += ("<span style='animation-delay: " + i/10 + "s;'>" + oldText[i] + "</span>"); }
el.innerHTML = newHtml;
})();
#keyframes wave {
from { transform: translateY(0); }
to { transform: translateY(-1em); }
}
h1.wavey { margin-top: 2em; }
h1.wavey span {
display: inline-block;
animation-duration: 1s;
animation-name: wave;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
<h1 class="wavey">Hello World</h1>

Reset transform: rotate() without invoking -webkit-transition: style

I am drawing a wheel on a canvas, rotating it and then wanting to reset the rotation to 0. however due to the css property: -webkit-transition: -webkit-transform 15s ease; when resetting the rotation, it is rotation from r -> 0 and taking 15 seconds. Is there a way to reset the rotation without invoking the transform 15s ease?
I am redrawing data on the canvas after the rotation transform has finished thus needing an instant reset.
Many thanks
var r=-(3600 + random);
$("#wheel").css("transform","rotate("+r+"deg)");
$("#wheel").css("-moz-transform","rotate("+r+"deg)");
$("#wheel").css("-webkit-transform","rotate("+r+"deg)");
$("#wheel").css("-o-transform","rotate("+r+"deg)");
$("#wheel").one('webkitTransitionEnd', function() {
$("#wheel").css("transform","none");
$("#wheel").css("-moz-transform","none");
$("#wheel").css("-webkit-transform","none");
$("#wheel").css("-o-transform","none");
});

I think I have a solution for this. By changing the css class to a 'default rotation' class briefly before changing the class to your animated rotation class you can control the animation timing on each separate class in order to have the wheel snap back to the starting position before rotating to your new position.
css:
.spin0 {
transform: rotate(0deg);
}
.spin750 {
transform: rotate(750deg) !important;
transition-duration: 2.5s !important;
}
js (on click):
element.className = "spin0";
setTimeout(function(){
element.className = "spin750";
}, 10);

Dynamically set css transform before transition

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.com/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 (uncomment last line), then the transition doesn't occur anymore.
Here is a Demo:
https://jsfiddle.net/fmt1rbsy/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.net/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 compute the page layout (e.g. document.body.offsetWidth).
Use 2 nested requestAnimationFrame's before applying your transform.
Demo: https://jsfiddle.net/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.com/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.com/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

javascript or css to animate file transfer

I want to show a file transfer...like from a folder to another folder, i have been able to do it using JavaScript but all what i did was:
<script type="text/javascript">
var img;
var animateR;
var animateL;
function init(){
img = document.getElementById('file');
img.style.left = '35px';
}
function moveRight(){
img.style.display= 'block';
img.style.left = parseInt(img.style.left) + 10 + 'px';
animateR = setTimeout(moveRight,30);
if(parseInt(img.style.left)>600){
clearTimeout(animateR);
moveLeft();
}
}
function moveLeft(){
img.style.left = parseInt(img.style.left) - 10 + 'px';
animateL = setTimeout(moveLeft,30);
if(parseInt(img.style.left)<38){
clearTimeout(animateL);
moveRight();
}
}
window.onload =init;
</script>
this work for me but i wish to show the file rotating whilst moving from the right folder to the left folder and back to the riight fold while the file is uploading.
also i am think if the best way to go around this will be a gif?
i want an effect like flying files

You can rotate images in css like this :
#rot{
animation: anime1 2s;
-webkit-animation: anime1 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes anime1 {
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg);/*Chrome & Opera*/
transform: rotate(360deg); /* The best browser (i mean firefox) */
}
}
#-webkit-keyframes anime1 {
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg);
transform: rotate(360deg);
}
}
Then just use js to display or hide animated image

If I have read your code correctly, you are making the file bounce back and forth between your right and left bounds. You could use the CSS3 transform property to rotate the files as they are moving back and forth as such.
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
However, you are still just moving your image file in 10 pixel increments, which probably looks choppy. A better solution would be to use CSS keyframe animations.