Skip to main content

Hi guys,


I’m a bit stuck with an idea I have. I would like to create a kind of a horizontal image accordion effect.




  1. In the image named Defaults, is the default state of an image gallery when you visit the page.




  2. When you click on an image, the card should then expand and show the information about the image. While expanding, the other two images on the same row should become smaller in width.




  3. The images animates to different sides of the active card depending on its position. (Image named Active)




  4. When activating one card, if there’s any other active card, it should close.




Would be very grateful for any tips.


Default

Here’s the other image:


Active

Convert the first row of active state to component.

Create Variant 2 with 2 image expanded and then Variant 3.

Use click event to map each Variant and use Smart Animate to switch.

image

Thank you, that was helpful!!

Great!

PS: Don’t forget to mark the question answered!

Reply


Terms & ConditionsCookie settings