-
Notifications
You must be signed in to change notification settings - Fork 491
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Trouble centering an element on screen #173
Labels
bug
Something isn't working
Comments
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In my React app, I would like to center an animated element on screen, using the following technique:
left
to 50%translateX
to '-50%'The animation should only affect the translateY, i.e. move this horizontally centered element in the vertical direction.
The challenge is:
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.translateX
animation to-50%
is not accepted by lax, it requires elWidth instead.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 fulltranslate3D
. For backwards compatibility, this could be controlled by an additional options flag.Thanks for providing this great library. Otherwise, I am happy.
The text was updated successfully, but these errors were encountered: