I’m trying to rotate two objects by scrolling horizontally. The scrolling is controlled by the mousemovement. When the pointer goes right, the objects rotate left, and the other way round. The faster the mouse moves, the more the object rotates.
When the mouse pointer stops for 30ms I want the object to commute slowly with a keyframe that is defined by the current mouse/scroll-speed.
The rotation during the scrolling works fine, but when I added the keyFrame-Function to commute the object, it all went weird.
It starts to rotate after I stop the mouse and it rotates up to 3 times and not in the shortest way.
Maybe someone knows why that is and how to dissolve this problem?
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rotating Objects</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src='scripts/jquery.keyframes.js'></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<style>
body {
overflow: hidden; /* Hide scrollbars */
}
.draggable, #draggable2 {
border: 2px solid #000;
width: 100px;
height: 200px;
}
#containment-wrapper {
width: 400px;
height:400px;
border:2px solid #000;
left: 10%;
bottom: 10px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#containment-wrapper_2 {
width: 400px;
height:400px;
border:2px solid #000;
left: 30%;
bottom: 10px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
#stage {
width: 400vh;
height:80vh;
border: 1px solid #000;
position: relative;
}
</style>
<script>
$(document).ready(function() {
var supportedFlag = $.keyframe.isSupported();
//set CSS Rotation Degree
function setRotationDegree(obj, angle) {
obj.css({
'-moz-transform' : 'rotate(' + angle + 'deg)',
'-ms-transform' : 'rotate(' + angle + 'deg)',
'-o-transform' : 'rotate(' + angle + 'deg)',
'transform' : 'rotate(' + angle + 'deg)',
'transition' : 'transform .3s ease-in'
});
}
//set Keyframe Values for commute after stop
function setRotateKeyframes(keyName, angle) {
//angle = angle * -1;
$.keyframe.define([{
name: keyName,
'0%': {'-moz-transform' : 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)',
'-o-transform' : 'rotate(' + angle + 'deg)',
'transform' : 'rotate(' + angle + 'deg)'
},
'25%': {'-moz-transform' : 'rotate(' + (angle * -0.9) + 'deg)',
'-ms-transform': 'rotate(' + (angle * -0.9) + 'deg)',
'-o-transform' : 'rotate(' + (angle * -0.9) + 'deg)',
'transform' : 'rotate(' + (angle * -0.9) + 'deg)'
},
'50%': {'-moz-transform' : 'rotate(' + (angle * 0.25) + 'deg)',
'-ms-transform': 'rotate(' + (angle * 0.25) + 'deg)',
'-o-transform' : 'rotate(' + (angle * 0.25) + 'deg)',
'transform' : 'rotate(' + (angle * 0.25) + 'deg)'
},
'75%': {'-moz-transform' : 'rotate(' + (angle * -0.1) + 'deg)',
'-ms-transform': 'rotate(' + (angle * -0.1) + 'deg)',
'-o-transform' : 'rotate(' + (angle * -0.1) + 'deg)',
'transform' : 'rotate(' + (angle * -0.1) + 'deg)'
},
'100%': {'-moz-transform' : 'rotate(0deg)',
'-ms-transform': 'rotate(0deg)',
'-o-transform' : 'rotate(0deg)',
'transform' : 'rotate(0deg)'
}
}]);
}
var docWidth = $('body').width(),
slidesWidth = $('#stage').width(),
rangeX = slidesWidth - docWidth,
$div = $('#stage');
$(window).on('resize', function() {
var docWidth = $('body').width(),
slidesWidth = $('#stage').width(),
rangeX = slidesWidth - docWidth;
})
//variable for if mouse-doesnt-move check
var timeout = null;
//variable for scrolling direction check
var lastScrollLeft = 0;
$(document).mousemove(function(e) {
var mouseX = e.pageX,
percentMouse = mouseX / docWidth,
offset = percentMouse * slidesWidth - percentMouse * docWidth;
//check if left or right direction
var sl = offset;
var leftOrRight = 0;
//speed of mousemovement
var scrollSpeed = offset - lastScrollLeft;
//Maximum 180degree rotate not necessary?
scrollSpeed = (scrollSpeed * -30);
setRotationDegree($('.draggable'), scrollSpeed);
lastScrollLeft = sl;
//Rotate back when mouse didn't move for 30ms
clearTimeout(timeout);
timeout = setTimeout(function() {
//setRotationDegree($('.draggable'), 0);
//THIS BRINGS THE TROUBLE
setRotateKeyframes('swingRotate', (scrollSpeed));
$('.draggable').playKeyframe(
'swingRotate 3s ease-in-out both',
);
}, 30);
$div.css({
'-webkit-transform': 'translate3d(' + -offset + 'px,0,0)',
'transform': 'translate3d(' + -offset + 'px,0,0)'
});
});
//Object draggable
$( ".draggable" ).draggable({
revert: true,
containment: "#containment-wrapper",
});
$( "#draggable2" ).draggable({
revert: true,
containment: "#containment-wrapper_2",
});
});
</script>
</head>
<body>
<div id="stage">
<div id="containment-wrapper">
<div id="draggable" class="draggable">
<p id="distance"></p>
</div>
</div>
<div id="containment-wrapper_2">
<div id="draggable2" class="draggable">
<p id="distance"></p>
</div>
</div>
</div>
</body>
</html>