Problem with fading animation

Ask the community
,
1

Totally new coder here and I would really appreciate some help on an animation feature.

Scenario : I have succeeded in generating a randomised set of quotes/author from a dataset (“dataset1”), and I am trying to make each set of quotes/author fade in and fade out with each mouse click on the column strip (“columnStrip4”).

Saw some past advice on animation and did a ‘Fade In’ animation on editor, then some coding as follow :

import wixData from 'wix-data';

export function columnStrip4_click_1(event) {
	// clear any filters in the dataset
	$w("#dataset1").setFilter(wixData.filter());

	// get size of collection that is connected to the dataset
	let count = $w("#dataset1").getTotalCount();

	// get random number using the size as the maximum
	let idx = Math.floor(Math.random() * count);

	// set the current item index of the dataset
	$w("#dataset1").setCurrentItemIndex(idx);
  
 
$w("#group1").hide();

let fadeOptions = {
  "duration":   1200,
  "delay":      0
};

$w("#group1").show("fade", fadeOptions);

}

The animation is somewhat wonky but I have really spent two days on this and getting nowhere… hence any help here will be greatly appreciated! :=====(

2

Well, you haven’t explained what you mean by “wonky”, but one thing I noticed is that you haven’t handled the Promise returned by setCurrentItemIndex() .

Something like this might unwonkify the fade:

$w("#dataset1").setCurrentItemIndex(idx)
    .then( () => {
        console.log("Done setting current item");
        $w("#group1").show("fade", fadeOptions);
   } );
3

Hi,

In addition to Yisrael’s post, I also noticed the hide/show functions are being executed right after the other which might also make it behave wonky.

I’d maybe add a condition to check if the element is already being hidden and then display it if it’s been clicked or hide if it’s been clicked again.

You can maybe try something like this:

export function columnStrip4_click_1(event) {
 let groupItem = $w("#group1");

 if (groupItem.hidden) {
 let fadeOptions = {"duration": 1200,"delay": 0};
 
     $w("#group1").show("fade", fadeOptions)
    } else {
     $w("#group1").hide();
    }
}

Best regards,
Miguel

4

I should also point out that hide() and show() both return a Promise. So, when you hide(), you should wait till the Promise is fulfilled before doing the show(). Something like this:

$w("#group1").hide()
  .then( ( ) => {
    console.log("Done with hide");
    $w("#group1").show("fade", fadeOptions);
} );

Are we having fun?

5

@yisrael-wix @mrtobor Too much fun that I’m wonking out! (-_-)"

Thank you both for your advice, however, as much as I tried to make sense of both sets of answers, I’m very limited in my understanding of coding. To that effect, I have tried a few variations but all yielded similar effects - i.e. when I clicked once, Quote#1 disappears, before reappearing for a split second just before Quote#2 fades in …

Also, at times, random quotes may appear even before I click on the strip column.

My current coding :

import wixData from 'wix-data';

export function columnStrip4_click_1(event) {
 
 // clear any filters in the dataset
    $w("#dataset1").setFilter(wixData.filter());

 // get size of collection that is connected to the dataset
 let count = $w("#dataset1").getTotalCount();

 // get random number using the size as the maximum
 let idx = Math.floor(Math.random() * count);

 // set the current item index of the dataset
    $w("#dataset1").setCurrentItemIndex(idx);
 
 
let fadeOptions = {
 "duration":   1200,
 "delay":      0
};

$w("#group1").hide()
  .then( ( ) => {
    console.log("Done with hide");
    $w("#group1").show("fade", fadeOptions);
} );


}

Sincerely hope to resolve this coz its 4 days now since I’m stuck here… cries