Streaming live at 10am (PST)

Product Comparison Toggle | Interaction errors

Hi guys,
I hope everyone is doing well considering what’s been going on :heart:

I’m looking for some help with a product comparison toggle animation that I’ve been working on.

The plan was to show both products right next to each other so they’re easy to compare but once users decide what’s best for them, they can filter the other product out as so:

Now my problem is that when you toggle one product and try to toggle the other product instead, they both disappear

However, if I click the selected product again to reset the buttons state back to normal and then click the other product, it works as expected.

How do I make it so the products toggle correctly?

And on top of that, the hover breaks after selecting and then unselecting a product

The slide animation is also quite choppy. Halfway through the animation, it stutters. If anybody knows a fix for that too I’d greatly appreciate it. Here’s a Higher res gif with a longer animation duration to show you.

Thanks guys!

Here is my public share link

Oh and by the way, I’ve only been using webflow for a couple of days now so my layouts are probably far from perfect structurally so If you have any advice on best practices i’d love to know!

@Waldo Could you help me out?