Animation to move object on a page how to keep object hidden ?

Ask the community
, ,
1

Dear community members

First I would like to thanks all of you for the various topics your are exchanging on this forum. It was so useful for me to succeed to code my web site.

My issue is the following I have a page were I need to move use input box down from 100px to make another one appear at the same place.
Despite the missing API Velo function to move object on page, I found in this forum the idea of using wix-animation to do so.
After some try it works well.
BUT, I have some textbox which are hidden, and should move also with the animation (they appear only in case of error to warn the user). And there is a bug in wix-animation !

As soon as the timeline is played, all hidden object are made visible, but not correctly because the isVisible status stays at “false”. And after that impossible to make them disappear again. The code is lost!

I created a test page to reproduce the mistake :

import wixAnimations from ‘wix-animations’ ;

let timeLine = wixAnimations . timeline ();

$w . onReady ( function () {
timeLine . add ( $w ( “#input1, #text5, #button3” ), {
“duration” : 1000 ,
“y” : 100
});
});

export function button1_click ( event ) {
timeLine . play () ;
console . log ( “text5 isVisible after play” , $w ( “#text5” ). isVisible ) ;
console . log ( “button3 isVisible after play” , $w ( “#button3” ). isVisible ) ;
}

export function button2_click ( event ) {
timeLine . reverse () ;
}

2

After lot of tries, I found a workaround to not being blocked by this bug.

I add the onStart event handler to my timeline.
And I force a show then instantly re-hide of my hidden objects.

Then the play or reverse functions of the timeline, let my hidden objects hidden.
And I can show them when I want after they have been moved by the animation😀.

import wixAnimations from ‘wix-animations’ ;

let timeLine = wixAnimations . timeline ();

$w . onReady ( function () {
timeLine
. add ( $w ( “#input1, #text5, #button3” ), {
“duration” : 1000 ,
“y” : 100
})
. onStart (()=>{
$w ( “#text5, #button3” ). show () ;
$w ( “#text5, #button3” ). hide () ;
});
});

export function button1_click ( event ) {
timeLine . play () ;
console . log ( “text5 isVisible after play” , $w ( “#text5” ). isVisible ) ;
console . log ( “button3 isVisible after play” , $w ( “#button3” ). isVisible ) ;
}

export function button2_click ( event ) {
timeLine . reverse () ;
}

export function input1_input ( event ) {

$w ( "#text5, #button3" ). show () ;

}

I hope it could help someone (before WIX correct the bug in the Velo API :wink: )