Description
If you have an element with a transform: translateY(100px) a keyframeEffect that goes from translateY(0px) to translateY(100px), the original 100px is overridden, even with the composite property set to add or accumulate. Mozilla docs.
The same thing happens with multiple keyframeEffects in a keyframeGroupEffect.
Strangely, this occurs in Chrome where this should be native.
Am I misunderstanding how this should work, or is it that Chrome and this polyfill don't implement the keyframeEffect.composite property?
If it's the later, do you know of anyway I could achieve having multiple transforms being applied to an element? Manually adding them into one keyframeEffect works fine for example.
var keyframes = [
{transform: 'translateY(0px) scale(1)'},
{transform: 'translateY(1000px) scale(1)'},
]
But doesn't allow me to have different easing functions for the translation and scaling.
The only other thing that's worked so far is wrapping the element in other elements and having each animation affect a different target.
I actually have a jsbin showing this, but it is completely not responding to me at the moment, I will link from a different computer when I can.