Building interactive sections with Multi-State Box

Learn how to build an interactive section using the Multi-State Box component, which allows you to turn a single section into multiple layouts. Connect everything with a few lines of code for an experience users can fully engage with.

Use Multi-State Box to turn a single section into multiple interactive layouts. In this tutorial, learn how to build a full-screen hero with three “flavor” states—each with its own colors, imagery and content. Design the main state, duplicate and customize the others, create a docked sidebar with clickable fruit buttons, then wire it all together with a few lines of code to swap states and update background colors. Finish by adding entrance animations so elements float in as each state loads for a smooth experience.

Use this code:

$w("#box10").onClick(()=>{

$w("#multiStateBox1").changeState('box3')

$w("#box5").style.backgroundColor = "#FFCBDD"

})

$w("#box11").onClick(()=>{

$w("#multiStateBox1").changeState('box2')

$w("#box5").style.backgroundColor = "#FFDDCB"

})

$w("#box12").onClick(()=>{

$w("#multiStateBox1").changeState('box16')

$w("#box5").style.backgroundColor = "#CBCBFF"