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 ();
})
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…
!!!Don’t forget to like it, if you really liked it!!!
//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();
});