Adding easing to my animation function

JavaScript
1

i have a javascript function that rotate an image to a specific deg

document.addEventListener("DOMContentLoaded", function(event) {
var start = null;
var element = document.querySelector('#wheel');
var max = 1420;
function DOrotate(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    var newPosition = Math.min(progress / 10, max);

    element.style.transform = 'rotate('+newPosition+'deg)';

    if (newPosition < max) {
      window.requestAnimationFrame(DOrotate);
    }
}
    document.querySelector("#startButton").addEventListener('click', function() {
      window.requestAnimationFrame(DOrotate);
    });
});

i didnt know how to add easing to it from this answer here

2

My css and dom animation knowledge is a bit rusty, but can’t you just set your timing and easing in a css class instead?

Something like this?

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Rotate</title>
  <style>
    .image-wrapper {
      width: 150px;
      height: 150px;
      margin: 50px;
      background-color: teal;
      /* set easing and timing here */
      transition: transform 3s ease-in-out;
    }
  </style>
</head>
<body>
  <div class='image-wrapper'>Click me</div>
<script>
  document.querySelector('.image-wrapper')
    .addEventListener('click', function(event){
      elem = event.target;
      elem.style.transform = 'rotate(1440deg)';
    }, false)
</script>
</body>
</html>
3 Likes
3

I agree with @rpg_digital - it’s better to use the more effective tool that does this in an easier way. In this case that looks to be CSS.

3 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.