How do I create an infinite loop of an image/element to hide/show every few seconds

Ask the community
,
1

Hello everyone,
I have two images in the background of my website,
i want the image thats on the layer above, to dissapear and then reapear every few seconds, an infinite loop.

I got it to disappear but not to reappear, what am I doing wrong?
Help.

import wixAnimations from ‘wix-animations’ ;
let timeline = wixAnimations . timeline ();

$w . onReady ( function (){
const Picture01 = $w ( ‘#imageX1’ );

timeline 
  . add ( Picture01 , { opacity : 0 ,  duration : 1000 ,  delay : 1000  }) 
  . play ();

})

2

Why that complicated?

Try this one instead…

    const image = $w('#imgBook');
    function blink() {
        if (image.hidden) {image.show('fade')}
        else {image.hide('fade');}
    }
    setInterval(function() {blink();}, 1500);

Good luck and have fun!

You also can change from → “fade” to another animation → like —> “slide”, “flip” and so on…

Code-Ninja
Code-Ninja445×525 102 KB

!!!Don’t forget to like it, if you really liked it!!!

3 
//SOLVED IT!

import wixAnimations from 'wix-animations';let timeline;$w.onReady(function () {
  const Picture01 = $w('#imageX1');  function playAnimation() {
    timeline = wixAnimations.timeline()
      .add(
        Picture01,
        {
          "opacity": 0,
          "duration": 1000,
          "delay": 3000,
          "easing": "easeOut"
        }
      )
      .add(
        Picture01,
        {
          "opacity": 1,
          "delay":3000,
          "duration": 1000,
          "easing": "easeIn"
        }
      )
      .onComplete(() => {
        // Loop the animation by calling playAnimation() again
        playAnimation();
      })
      .play();
  }  playAnimation();
});
4