CODEWITHSUNDEEP
javascripthtmlcsscss-animations
aayush612
aayush612

Reputation: 192

Element fading in the direction of css animation during translation

I am making a game in which the user controls a ball as per his input. But the problem is that the ball while translating its position from point A to point B is fading during the animation in the direction of motion.

I have also attached a basic snippet which illustrates the problem.

Please have a look.

var item = document.getElementById('item');
var anim;
var x=0, y=0;
function myMoveLeft(){
 anim=item.animate([
  { transform: `translate(${x}px, ${y}px)` }, 
  { transform: `translate(${x-100}px, ${y}px)` }
], {
     duration: 500,
     iterations: 1,
     fill: 'forwards'
  });
}

function myMoveDown(){
 anim=item.animate([
  { transform: `translate(${x}px, ${y}px)` }, 
  { transform: `translate(${x}px, ${y+150}px)` }
], {
     duration: 600,
     iterations: 1,
     fill: 'forwards'
  });
}
button{
  display:inline-block;
  height:40px;
  width:80px;
}
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: DarkSeaGreen ;
}

#item {
  background: darkgreen;
  position: absolute;
  right:30px;
  top:30px;
  height: 40px;
  width: 40px;
  margin: 0px;
  border-radius:50%;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0) scale(1.0, 1.0);
  filter: blur(0);
  


}
<p>
  <button onclick="myMoveLeft()">Left</button> 
<button  onclick="myMoveDown()">Down</button> 
</p>

<div id ="myContainer">
  <div id="item"></div>
</div>

As can be seen, some part of the circle is being eaten away during rendering. I did try some troubleshooting by adding scale transforms and other css solution present in the snippet, but none works for me.

PS: I have made enough progress with my application to change the .animation() technique. If possible, kindly suggest if something can be done to get around this "bug".

Thanks in Advance!

Upvotes: 0

Views: 73

Answers (1)

ebyte
ebyte

Reputation: 1517

u can use transition: all ease 1s;

var item = document.getElementById('item');
var anim;
var x=0, y=0;
function myMoveLeft(){
 item .style.right = '130px'
}

function myMoveDown(){
  item .style.top = '90px'
}
button{
  display:inline-block;
  height:40px;
  width:80px;
}
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: DarkSeaGreen ;
}

#item {
  background: darkgreen;
  position: absolute;
  right:30px;
  top:30px;
  height: 40px;
  width: 40px;
  margin: 0px;
  border-radius:50%;
  transition: all ease 1s;
  filter: blur(0);
}
<p>
  <button onclick="myMoveLeft()">Left</button> 
<button  onclick="myMoveDown()">Down</button> 
</p>

<div id ="myContainer">
  <div id="item"></div>
</div>

Upvotes: 1

Related Questions