Help : Changing Multi-state box transition effect to reveal

Ask the community
,
1

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

2

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.

3

Ok sorry, i am new

4

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” );
} );

});

5

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();
}
})
6

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/

709×273 34.9 KB

getting error

7

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();
    }
});
8

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

9

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

10

Thanks guys but i already tried this get this error

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

11

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.

12

727×106 16.2 KB

13

Hello guys,help plz?

14

What is the code that you have now?

15

$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 ();
}
});

16

$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 ]); 
    
})

});