Lock 10 for Web - How to disable animations?

Help
,
1

Hi! I’m using Lock 10 for Web in an embedded browser in a native android app. Everything works like a charm except for the animations which are really slow. For that reason, until I manage to actually fix the animations being slow, I need to disable lock animations. From googling around, I can see that this was an option with lock 9. Can someone guide me through the steps needed to disable animations in Lock 10 for Web? I’m not a Web developer so please do not assume any advanced web-related knowledge.

Thanks in advance

2

Are you using the latest version of Lock? The reason I ask is there was this issue that was a fixed only for some versions of Lock 10.

3

Yes, I was using 10.12.1 and now updated to 10.14.0. The problem is different to what is described in the issue. Lock loads fine, after the spinner is gone, the ‘expand’ animation is taking a long time. This happens only in the embedded browser, that’s something inherent to it. For that reason I need to disable the animations. How do I override the css to disable the animations?

4

The possibility that was available and documented for Lock 9 is not available for version 10. The whole CSS overriding is discouraged explicitly in the Lock 10 documentation:

Customizing your Lock by overriding its CSS isn’t the recommended method with Lock 10.

This means that the approach documented for disabling animations in Lock 9 is not available or recommended in 10:

#a0-lock * {

   -webkit-animation: none !important;
   animation: none !important;
   -webkit-transition: none !important;
   transition: none !important;
 }

Having said that one could (at his own risk) assume that if in Lock 9 animations were controlled through CSS the same could be true for Lock 10 and try a similar approach. I’m not saying you should do it, I’m actually saying you should not do it but you can look for the CSS class or element (it could be .auth0-lock instead of #a0-lock) that could be used to try to perform a similar approach; of course this would mean you would be on unsupported territory so at least consider the following:

If you still intend to override CSS to further style your Lock, we recommend that you use a specific patch version of Lock rather than a major or minor version, (…) This can be done by ensuring that you specify that patch verion (x.y.z) when including Lock, or downloading it.

5

We explored trying to leverage customized CSS classes for basic text styling in Lock 10, but they do not appear to work (as of Lock 10.11). Even specifying

#a0-lock * { ... }

does not work.

6

As mentioned in the answer, customization through CSS overrides are not supported in Lock 10. If you do it, it may work in one version and stop working in the next; you would be in unsupported territory.