Smooth transition when changing image element's src

Ask the community
,
1

currently i build a custom product gallery page with repeater
i’m trying to mimic the way deault productGallery change image when hover and just did it, but the way image changes is not as smooth as default productGallery as it has no transition effect,
is there a way to add transition when changing src value ?
perhpas not just for image element src but also another element’s background src

here’s my current code :

$item("#productContainerElt").onMouseIn(() => {

	if (itemData.mediaItems[1]) { $item("#productImageElt").src = itemData.mediaItems[1].src }

})

productContainerElt is container inside repeater and productImageElt is image element inside repeater container

1 Like
2

You could first hide(effect) the image component, then set the .src property to the new image, and then finally show(effect) the image component.

3

i tried it but the “show” action not executed i think, here’s my code :

$item(“#productImageElt”).hide(“fade”,{“duration”: 10})
$item(“#productImageElt”).src = itemData.mediaItems[1].src }
$item(“#productImageElt”).show(“fade”,{“duration”: 10})

maybe hide and show executed at the same time, is there a code to wait for the current line finishes before execute the next line ?

4

trying with .then but looks like it’s not properly coded

5

@abronson The hide and show functions return Promises which need to be handled. See the docs and the accompanying example snippets. For example, something like this:

$w("#productImageElt").hide("fade")
.then( ( ) => {
    console.log("Done with fade");
    $item("#productImageElt").src = itemData.mediaItems[1].src }
    $item("#productImageElt").show("fade")
    .then( () => {
        console.log("Done wih show"):
    } 
} );
6

You can also do this with async/await:

await $w("#productImageElt").hide("fade");
$item("#productImageElt").src = itemData.mediaItems[1].src };
await $item("#productImageElt").show("fade");
7


it has no warning but the change src action is executed after show,
how to set it to hide => wait => change src=> wait => show ?

8

@abronson Please post the editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

9

@yisrael-wix i’ve ended up with creating 2nd image element, I can choose the transition effect and it runs at the same time, 2nd element start showing immediately as hiding 1st element without waiting the 1st element to hide, it looks really smooth than i expected

is there any code to create the 2nd element with code ? so that i don’t need to create and matching size between 1st element and 2nd element manually ? i know i can just copy the element and aligning with align tool on the toolbar, but if there a code to dynamilcally create the 2nd element based on the 1st element it would be great