Transition for only certain transformations in javascript

Question

I have this code here and im trying to make a rocket appear to fly across the screen. My image has the rocket faced upwards, so I want to rotate it x degrees. When I do that, though, it transitions into x degrees over 5 seconds because I set a transitionDuration. I can't do this code in css because all the values are defined in javascript, but how can I make only the transition duration happen to the translateX and translateY and not the rotate.

<img class = "image" id = "rocketImage" src = "rocketimage.png" alt = "rocket" width= "50px" height = "50px"> </img>

rocketImage.style.transform = "translateX(60px) translateY(60px) rotate(60deg)";
rocketImage.style.transitionDuration = "5s, 5s, 0s";

score 1 · Accepted Answer · answered Feb 15 '21 at 07:26

For more fine-grained control of the different transforms you could use a keyframes animation, starting the rocket off at the desired rotation and translating the x and y over time.

The values for x, y and deg can be set by JavaScript if they are defined in the keyframes as variables.

Here's a snippet (Note: the rocket shows the alt text as I don't have the rocket png).

let x = '60px';
let y = '60px';
let deg = '60deg';


const rocket = document.getElementById('rocketImage');
rocket.style.transform = 'rotate(' + deg + ')';

const root = document.documentElement;
 root.style.setProperty('--x', x);
 root.style.setProperty('--y', y);
 root.style.setProperty('--deg', deg);
 rocket.style.animation = 'rocket 5s 1 ease forwards';

@keyframes rocket {
  0% {
    transform: translateX(0) translateY(0) rotate(var(--deg));
  }
  100% {
    transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--deg));
  }
}

<img class="image" id ="rocketImage" src="rocketimage.png" alt="rocket" width="50px" height="50px"> </img>

score 0 · Answer 2 · answered Feb 15 '21 at 03:46

You can set the rotation first, then add the transition duration and change the translation after that. Just make sure to keep the rotation part of the transformation the same both times, and then the browser won't need to transition anything when you reset the style to include the translation as well.

Here, I'm using setTimeout with no timeout specified to just force the JS to wait a beat before getting to the next part of the function, which ensures the rotation transform happens before the transition-duration gets set.

const blastoff = () => {
  const rocket = document.getElementById('rocket');
  rocket.style.transform = 'rotateZ(45deg)';
  setTimeout(() => {
    rocket.style.transition = 'transform 2.5s ease';
    rocket.style.transform = 'translateX(250px) translateY(-250px) rotateZ(45deg)';
  });
};

setTimeout(blastoff, 2000);

body {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100vh;
  margin: 0;
}
#rocket {
  background-color: red;
  width: 40px;
  height: 120px;
  position: relative;
}
#rocket::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 40px solid red;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  transform: translateY(-100%);
}

<div id="rocket"></div>

Transition for only certain transformations in javascript

2 Answers2