0

I am building a subtitle editor that has customisation tools for toggling animations that can scale and move text. Each animation is atomic and has a CSS keyframe. Example of two animations:

@keyframes upward {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-30px);
  }
}

@keyframes stretch {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(1.1);
  }
}

Each subtitle uses a specific class, which has the above animations (this can be seen in the code below). Each animation has a checkbox in HTML, whose value JavaScript uses to toggle the animation-play-state property through a custom property (e.g. --happy-animation-stretch-state), which causes the animation to either pause or run.

.happy {
  display: inline-block;
  color: var(--happy-colour);
  animation: upward var(--animation-duration), stretch var(--animation-duration);
  animation-play-state: var(--happy-animation-upward-state), var(--happy-animation-stretch-state);
  transition: 0.3s;
}

The problem is that only one of the animations works. I am not sure what is wrong?

EDIT: I managed to solve this by enwrapping the element I was trying to transform in multiple divs - one for each animation. Here is the original solution.

jakub100ful
  • 1
  • 2
  • 2
    I believe the issue is that both animations operate on the `transform` property. You should be able to combine them into one animation that does both, but having them separate will not work because they overwrite each other. – Trevor Atlas May 17 '21 at 19:56
  • @TrevorAtlas Ahh okay I see! I've had a look at rewriting the code to combine them, but certain animations that use the transform property actually use a different duration (which I use to control the speed of the animation), and I am not sure how I could solve that if they were combined into one. – jakub100ful May 17 '21 at 20:46

0 Answers0