I’d like to have each image card to scale up when hovering. The arrow on the side will slide the slider one image at a time (either to left or right). This by itself would need to be an interactive component.
Image scaling card needs to be in its own component.
Here’s the video of the prototype:
You can see what I’m trying to accomplish on the 2nd row. I got the slider to work, but the scaling when hovering is not. I noticed a bit glitch when scrolling back, which have no idea what to do either.
I haven’t figured out another way how to do the carousel without doing nested component. Searching on YT channels didn’t seem to find anything. Any examples only doing the slider or the image scaling but not both at once.
Unless this is one of Figma’s lack of functionality?
If anyone has better solution, i’d be happy to hear about it.
Hey Jos, thanks for your patience. Thanks for sharing your file! I can’t pin down exactly what’s causing this behavior, but I tried re-creating your carousel myself to see if I could at least duplicate the problem. Strangely, I couldn’t find a reason why your set up shouldn’t work!
I even tried a different method of handling the carousel content by turning it into it’s own component.
Here’s a GIF to demonstrate (please dismiss the behavior of the chevron icon on Carousel 2). The only issue is that sometimes the hover effect just fades from one state to the next (a “dissolve” sort of effect) rather than using Smart Animate to gradually change size and darken the fill. You can see this happen on tile 2 and tile 3 on Carousel 1 at the beginning of this GIF. But after this dissolve-like transition happens, it then seems to fix itself and use Smart Animate again…
Something else I’ve noticed is the hover state sometimes gets stuck in the prototype. I have no clue what causes this. It might be caused by testing interactions and rapidly resetting? Somewhere along the way Figma seems to wig out. I’m not sure though. And you can see in the GIF below that the tiles in the carousel do eventually go back to their default state after a few seconds.
The only fix I have for when this happens is to close the prototyping tab and then re-open it.
I suspect this might be buggy behavior and would recommend filing a bug report.
Hi Alice, thanks so much for the demo. I am a bit confused…what’s the difference in your set up in Carousel 1 and Carousel 2? Since I’m only in view mode, I can’t really see how you construct the component. Funny enough, your nested component of scaling the card within the carousel slider component seem to work!
I am quite new in Figma perhaps there are a lot of things I don’t know yet.
I still can’t pin point my file setup problem so the only work around I have now is to set each slider in different frame. Not ideal but at least for now it’s working.
Yeah, happy to explain! The difference between Carousel 1 and 2 is that Carousel 1 uses a component to control the order of the content, and Carousel 2 does not. Here’s a GIF to demonstrate:
You can see that when I re-order tiles in Carousel 2 I’d have to select all of the blue tiles to move them, but since I’m controlling the tile order with a component for Carousel 1 I can manage that through the component named Jos / Slider order. It’s worth noting this seems to make no difference on whether the effect we’re trying to achieve in the prototype works I just wanted to try another way of managing the carousel content.
I just wanted to try another way of managing the carousel content.