Skip to main content

Anti-flicker

Info

Not applicable to the Framer integration.

If you use the Visual Editor and you override elements visible at page load (i.e. above the fold), it is recommended to add the anti-flicker snippet to those pages to ensure the content does not "flicker" upon loading.

This snippet temporarily hides the screen until the variant assignments are selected then allows the page to be rendered. The typical delay is around 300 milliseconds, with a 2-second timeout, in case of network issues.

Add the snippet​

Copy the snippet below and paste it above the Sumatra Optimize snippet in the <head> tag of your site.

<!-- Anti-flicker snippet -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
  h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
  (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','sumatraOptimize',2000,
  {});</script>
<!-- Anti-flicker snippet end -->
Important

The anti-flicker snippet must appear at the very top of your head tag to take effect.

Framer​

If you use Framer variants, (i.e. you are not adding Visual Editor overrides), then the anti-flicker snippet is typically unnecessary. It may degrade site performance and SHOULD NOT BE INSTALLED.

The one exception is redirects, which require the anti-flicker snippet on the source path only. See details here.