Skip to main content
Solved

Prototyping a horizontal accordion


Ayman_Osman

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.

Best answer by Vishal_Ramawat

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.

View original
This topic has been closed for comments

4 replies

Ayman_Osman
  • Author
  • New Member
  • 2 replies
  • April 7, 2024

Here’s the other image:


Vishal_Ramawat

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.


Ayman_Osman
  • Author
  • New Member
  • 2 replies
  • April 11, 2024

Thank you, that was helpful!!


Vishal_Ramawat

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings