Show/hide with timeout double take

Ask the community
,
1

I have 3 boxes that show/hide with animation options after a time out. My problem is that the show/hide of the boxes does a kind of ‘double take’. Each box show for a second, then hides and then shows again. I can’t figure out why? Any advice most appreciated. The code I am using is:

export function caboodle_viewportEnter(event) {
 let zoomOptions = {
 'duration': 2000,
 'delay': 1000
        };

    setTimeout(function () {
            $w("#caboodle1").show('zoom', zoomOptions);
         }, 500);

    setTimeout(function () {
            $w("#caboodle2").show('zoom', zoomOptions);
    }, 4000);

    setTimeout(function () {
            $w("#caboodle3").show('zoom', zoomOptions);
            $w("#plans").show();
    }, 7000);
    }
2

Can you show it as GIF or video?

3

Sure. Video attached. Apologies for the poor quality, but you can see what I mean.

4

@dean41146

  1. What happens when you change to another animation type? → float?
  2. What happens when you cut off your options and run it without options?
  3. Is the more CODE wich could cause this animation-bugs?

Try to analyse all possible scenarios to find the issue for your problem.

5

@russian-dima
Thank you very much for the tips you gave. They helped me find the answer to the problem.