Can't solve interaction issue

Design help General
1

Hello!!! Could someone help me out figure out how I can make the card animation (section 1) work when adding a tab functionality (Section 2)? I am doing something wrong and can’t figure out what…

https://preview.webflow.com/preview/mitigrate-website-v0?utm_medium=preview_link&utm_source=designer&utm_content=mitigrate-website-v0&preview=0e0d8cb100eaf600a9d8504469b35a82&pageId=6744736e10895feaadf4db20&workflow=preview

Thank you very much!!! :slightly_smiling_face:

2

Hey @alexwand

Can you explain with a bit more detail? Its not clear to me what exactly you’re trying to achieve with the tabs and how it should look like at the end.

Thanks and best regards :-)

3

Have you gotten a solution?

If no, where can we discuss?

4

Hello! Thank you for your response :)

I want to add tabs in section 1 and put the cards inside these tabs. However, when I do that, the card animation stops working.

Thank you very much :slight_smile:

5

Hello! :) I haven’t found a solution yet, but I’m happy to discuss it wherever works best for you. I’m new to this forum and not sure what the best approach is.

6

Hi @alexwand

Okay… the reason why I was asking is because the functionality of a tabs-element and the animation you want are contradictory. That means you cant have both at the same time.

I dont fully understand yet what you expect to happen when the user clicks on one of the tab-buttons, but if you expect it to scroll to the corresponding card, then it would be much easier to just use two anchor-links. So that when the user clicks on the first button it scrolls to the first card and if he clicks on the second button it scrolls to the second card.
Since the card-animation is a scroll-animation, you dont have to setup anything else than the two buttons and link them to the two cards.

If that is not what you want, can you explain what you want to happen exactly when a user clicks on one of the tab-buttons?

1 Like
7

Hello @Schuschi_Eyes Thank you so much for your response :slight_smile:

What I expect is that each tab will have its own set of cards. For example, the first tab will have two cards with specific content, and the second tab will have three cards with different content. Does that make sense? In this setup, the anchor links wouldn’t work as intended.

Thank you thank you!!

8

Ah okay, thanks for explaining :slight_smile:

I see that you need position: sticky for the card animation. The reason it doesnt work is because position: sticky cannot be used together with overflow: hidden, which is used by the tabs-element.
To fix the issue you can just go to the “tabs content” element and change overflow to clip:

image
image1920×993 128 KB

I can only test it in preview with your read-only link. I recommend you to test it on the live site aswell. If something doesn’t work, let me know :v:

1 Like
9

Omg it worked!! THANK YOU SO SO SO SO MUCH!! :raised_hands: I’m just starting out in Webflow and have spent days trying to figure this out. I really, truly appreciate your help! :blush:

10

Glad I could help :blush: Happy coding!