Smooth Variant Image change

Smooth Variant Image change

Hi @consti, yes thats possible.. alpine js has a transition feature: https://alpinejs.dev/directives/transition

you can add a transition to a x-show element

Thankyou!

did it work?

@jonas.halbstark not how I tried it, but I am currently on it

I need to add the attribut "x-transition" to the image with the attribut x-bind:src="variantImage ? variantImage : product.featured_image" right?

Yes

it doesn´t work like I did it.. is there something wrong? https://mk7svebqxx54xnwc-57626296517.shopifypreview.com

ah got it.. you are only changing the first image. x-transition only works witk x-show

you could try something like this:
<div x-data="{ opacity: 1 }">
<!-- put this somewhere on the variant selector -->
<div @click="opacity = 0; setTimeout(() => { opacity = 1 }, 500)">Animate Opacity</div>

<!-- Image with dynamic opacity and transition -->
<img src="image1.jpg"
:style="{ opacity: opacity }"
class="w-full h-auto transition-opacity duration-500 ease-in-out"
alt="Image with fading effect" />
</div>

x-data should be on a wrapping element wehre the images and the variant slector is inside

i did this, but I think I did something wrong 😅

do you have a new preview link for me?

yes, here: https://qttsg6z765y9yvn8-57626296517.shopifypreview.com

i cant find this in the code x-data="{ opacity: 1 }"

it´s on the 12-col-grid