Do you want to add a cool loading animation to your website before displaying some content? Well, now that is possible using Multi-State Boxes in Wix.
Before you copy the code over to your website, make sure you set up your website correctly:
Now that you have your site ready for the code, feel free to copy the code from below and adjust as needed to make sure it works on your own website!
$w.onReady(function () { $w('#mediaPlayer1').onEnded(() => { $w('#PreloaderStateBox').changeState("Intro"); }); $w('#button1').onClick(() => { $w('#PreloaderStateBox').changeState("Expanded"); }); $w('#button20').onClick(() => { $w('#PreloaderStateBox').changeState("Intro"); }); });
For this to work properly, make sure you change the names of "#mediaPlayer1", "#PreloaderStateBox", "#button1", and "#button20". Also, if you changed the names of the mutli-state box states, you will need to change "Intro" and "Expanded" as well.
Hope you found this tutorial useful and have a fantastic day!