Prevent content flashing
Hide / show content during the Wized initialisation and first render.
Walkthrough video about Wized Cloak, and Wized Cloak Custom attributes
Every web-app, where the content is dynamically rendered and not statically served from a server, tends to have "content flashes". This is true for Wized as well. To tackle that problem, we are introducing two HTML attributes that you can add to any element on your site. Those are
Add this HTML attribute to any element that should be hidden during the time Wized is being initialised. This will hide the element by default (opacity: 0) and only show it (opacity: 1) when Wized has fully completed initialisation. This is especially useful if you want to hide your Webflow "template" content.
wized-cloakHTML attribute in Webflow.
For some use cases, this off the shelf
wized-cloakattribute might no be enough. If you want to have a custom animation for when Wized is initialised or you want to use different CSS than opacity: 0 / opacity: 1 to hide and show your items during the Wized initialisation, you will want to use the
This attribute works in a very simple way. You attach the attribute to your Webflow elements and Wized then removes the attribute immediately after initialisation on the live page. This functionality gives you the opportunity to add custom CSS to your page that will be applied for the time when this attribute is present. We recommend to add your CSS for the
wized-cloak-customattribute globally to the <head> of your Webflow site. This is how the CSS could look like:
opacity: 0! important;
wized-cloak-customHTML attribute in Webflow.
These two attributes can also be used to hide content until a specific request has been executed. To use this, simply put in the name of the request you want to wait for inside of the value field of the attribute.
Example: Only show an element once the "Load user" request has been executed
Example 2: Remove wized-cloak-custom attribute when the "Load projects" request has been executed or when "Load comments" has been executed.
Don't forget to add your custom CSS when using the