search

juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.37k stars 3.69k forks source link

Animation Conflict #738

Open phantomlsh opened 3 years ago

phantomlsh commented 3 years ago

Describe the bug When multiple animations have the same target, they will conflict and produce unexpected results. Sometimes I need to control different property of an element by different events.

To Reproduce

anime({
  targets: 'div',
  rotate: '2turn'
})

anime({
  targets: 'div',
  translateX: 100
})

Only the second one (translateX(100px)) is working. There is no rotation.

Expected behavior The properties are not overlapping, they can be animated as they are instructed.

coolemur commented 3 years ago

One HTML element can have only one transform style. For example div.style.transform = "translateX(100px)" or div.style.transform = "translateX(100px);rotate(45deg)". In second example transform style is only one (containing multiple transformations).

In your example both animations are applied at the same time and second one overwrites the first one.

You can use JS variables (and/or promises) to achieve your goals. Also you can use animejs timeline for more complex animations.

Take a look at this:

https://codepen.io/coolemur/pen/poEEMZz

This is one way, how to animate two properties at the same time. 1) Events can change variables. 2) Then fire animejs with vars.

I don't know what you are trying to achieve here, but I would definitely consider using https://animejs.com/documentation/#timelineBasics