Help : Changing Multi-state box transition effect to reveal

I am trying to change transition effect of multistate box. I an using classic editor.


Please following our community guidelines do not use all CAPS.

What are you doing now? What doesn’t work? Share your code so we can see what you are doing.

Ok sorry, i am new

this is my code, I just wanted to add a reveal animation to state changes and is there a way if I can add a Next and Previous buttons to change states rather than having different buttons for each state

$w . onReady ( function () {

$w ( “#r1” ). onClick ( ( event ) => {
$w ( “#statebox8” ). changeState ( “residence1” );
} );

$w ( “#c1” ). onClick ( ( event ) => {
$w ( “#statebox8” ). changeState ( “commertial1” );
} );

$w ( “#p1” ). onClick ( ( event ) => {
$w ( “#statebox8” ). changeState ( “product1” );
} );

$w ( “#d1” ). onClick ( ( event ) => {
$w ( “#statebox8” ). changeState ( “3d1” );
} );

});

You’re asking 2 different questions:

  1. Can I animate state transition? Answer: I think you can’t.

  2. How to use a single button to change state?
    Answer:
    Put the Next and Previous buttons outside the MS box.

An add code like this:

$w.onReady(() => {
toggleButtons(0);
const states = $w('#msb').states.map(s => s.id); 
$w('#nextButton, #previousButton').onClick(event => {
    const currentIndex = states.indexOf($w('#msb').currentState.id);
    const targetStateIndex = event.traget.id === 'nextButton' ? currentIndex + 1 : currentIndex - 1;
    $w('#msb').changeState(states[targetStateIndex]);
    toggleButtons(targetStateIndex);
})
function toggleButtons(index){
    index === 0 ? $w('#previousButton').disable() : $w('#previousButton').enable();
    index === states.length - 1 ? $w('#nextButton').disable() : $w('#nextsButton').enable();
}
})
1 Like

thank you very much
i was trying to get a similar effect as you get from clicking living and working buttons on the website


https://interiorlab.creative-nights. com/

getting error

Just a little SYNTAX-ERROR…Try it again…

$w.onReady(()=> {toggleButtons(0);
    const states=$w('#msb').states.map(s=> s.id);
    $w('#nextButton, #previousButton').onClick(event=> {console.log(event);
        const currentIndex = states.indexOf($w('#msb').currentState.id); 
        const targetStateIndex=event.traget.id==='nextButton' ? currentIndex+1:currentIndex-1;
        $w('#msb').changeState(states[targetStateIndex]);
        toggleButtons(targetStateIndex);
    });
    function toggleButtons(index){
        index===0 ? $w('#previousButton').disable() : $w('#previousButton').enable();
        index===states.length-1 ? $w('#nextButton').disable() : $w('#nextsButton').enable();
    }
});

@russian-dima Thanks for correcting me. I write the answers right here with no code auto-correction, so thanks for catching my typos…

1 Like

@jonatandor35 I know :sweat_smile:, i already expected this. No problem.

Thanks guys but i already tried this get this error

TypeError: Cannot read properties of undefined (reading ‘length’)

Hmm, J.D. will help you out, he know his own codings better than me.
And for you @tushar malik, it’s always better to show the ERROR-LOG as a screenshot → just like you did it in your previous question.

Hello guys,help plz?

What is the code that you have now?

$w . onReady (()=> { toggleButtons ( 0 );
const states = $w ( ‘#statebox9’ ). states . map ( s => s . id );
$w ( ‘#nextButton, #previousButton’ ). onClick ( event => { console . log ( event );
const currentIndex = states . indexOf ( $w ( ‘#statebox9’ ). currentState . id );
const targetStateIndex = event . traget . id === ‘nextButton’ ? currentIndex + 1 : currentIndex - 1 ;
$w ( ‘#statebox9’ ). changeState ( states [ targetStateIndex ]);
toggleButtons ( targetStateIndex );
});
function toggleButtons ( index ){
index === 0 ? $w ( ‘#previousButton’ ). disable () : $w ( ‘#previousButton’ ). enable ();
index === states . length - 1 ? $w ( ‘#nextButton’ ). disable () : $w ( ‘#nextButton’ ). enable ();
}
});

$w . onReady ( function () {

**var**  states  = [ 'mb1' ,  'mb2' ,  'mb3' , 'mb4' ]; 
**var**  stateNumber  =  0 ; 
console . log ( stateNumber ) 

$w ( "#nbtn" ). onClick (( event )=>{ 
    **if** ( stateNumber  <  states . length - 1 ){ 
        stateNumber ++ 
    } **else** { 
        stateNumber  =  0 
    } 

    $w ( '#multiStateBox1' ). changeState ( states [ stateNumber ]); 
    
}) 

});