lax.js

lax.js copied to clipboard

In my React app, I would like to center an animated element on screen, using the following technique:

1. Setting left to 50%
2. Setting translateX to '-50%'

The animation should only affect the translateY, i.e. move this horizontally centered element in the vertical direction.

The challenge is:

1. One I apply a translateY animation, translateX and translateZ will automatically be set to (almost) 0, overriding the settings I applied via CSS.
2. Adding another translateX animation setting with -0.5*elWidth quite often fails. It seems as if lax.js is not able to calculate the element's width and thus sets it to 0 instead. I am not sure if this is unique to React. Sometimes, it helps if you add a pseudo animation stop that is lower than '-0.5*elWidth', but not always.
3. Setting the translateX animation to -50% is not accepted by lax, it requires elWidth instead.
4. Overriding the transform with translateX(-50%) !important does not work either, since it will override all animations by lax as well.

This really caused me a lot of headaches. I think it would be best if lax would only add those transforms that are explicitly specified. That means: If I animate translateX, then only this parameter should be animated, not a full translate3D. For backwards compatibility, this could be controlled by an additional options flag.

Thanks for providing this great library. Otherwise, I am happy.

Another update here: I just noticed that even if I only want to the opacity of an element, a translate3d will be added as well. This is even more counter-intuitive. And causes the same problems as described above if the element is actually being positioned using translates.