Css transform with easing curve-CodePudding

I want to animate element position using transform. How could I add some curve to this translate (nothing fancy, just not a full straight line)? With jquery I would use easeInSine which worked well.

var a = document.querySelector('.a')
document.querySelector('.button').addEventListener('click', function() {

  var ww = window.innerWidth - (window.pageXOffset || document.documentElement.scrollLeft),
    wh = window.innerHeight - (window.pageYOffset || document.documentElement.scrollTop),
    rect = a.getBoundingClientRect(),

    final_left = ww - rect.left - a.offsetWidth,
    final_top = wh - rect.top - a.offsetHeight


  a.style.transform = "translate("   final_left   "px,"   final_top   "px)";


})

.a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  transition: all 0.4s;
}

.button {
  margin-left:100px;
}

<div >

</div>

<button >
  run
</button>

CodePudding user response：

Just add Border radius to it for example

.a {
  position: absolute;
  border-radius: 40px;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  transition: all 0.4s;
}

I hope this will help you

CodePudding user response：

As far as i know this is not possible with a single attribute like "transform".

For a circle motion you need to be able to set different transition-timings for your x-axis- and y-axis-movement. CSS can only do this if you use dedicated transition-attributes for both your x-movement and y-movement.

Since the transform-attribute cannot be split up like this you would need to change your code to use the "left" and "top" properties and add different transition-timings to each movement.

I updated your example in this fashion and the object now moves in a curved path.

var a = document.querySelector('.a')
document.querySelector('.button').addEventListener('click', function() {

  var ww = window.innerWidth - (window.pageXOffset || document.documentElement.scrollLeft),
    wh = window.innerHeight - (window.pageYOffset || document.documentElement.scrollTop),
    rect = a.getBoundingClientRect(),

    final_left = ww - rect.left - a.offsetWidth,
    final_top = wh - rect.top - a.offsetHeight


    a.style.left = final_left   "px"  ;
    a.style.top = final_top   "px";


})

.a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  transition: top 0.8s ease-in, left 0.8s ease-out;
}

.button {
  margin-left:100px;
}

<div >

</div>

<button >
  run
</button>

CodePudding user response：

you can use animate for easeInSine method.see this how it works. its MDN web. here. for curve matters I'm not sure this can run as you want.

var a = document.querySelector('.a')
document.querySelector('.button').addEventListener('click', function() {

  var ww = window.innerWidth - (window.pageXOffset || document.documentElement.scrollLeft),
    wh = window.innerHeight - (window.pageYOffset || document.documentElement.scrollTop),
    rect = a.getBoundingClientRect(),

    final_left = ww - rect.left - a.offsetWidth,
    final_top = wh - rect.top - a.offsetHeight


  a.style.transform = "translate("   final_left   "px,"   final_top   "px)";

   
})

   function goleft() {
   a.animate([ 

   { transform: "translateX(0px)" }, 
   { transform: "translateX(700px)" },

   { transform: "translateY(80px)" },
   { transform: "translateY(900px)" }


   ], { // timing options, more high numbers, the slower it will be
   duration: 1000, 
   easing: "ease-in-out", 
   fill: "both" 
   }); 

   }

.a {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: red;
  transition: all 0.4s;
}

.button {
  margin-left:100px;
}

<div >

</div>

<button >
  run
</button>

<button  onclick="goleft()">
  go buddy
</button>