Multiple interaction popups - Initial hidden states not working

Design help Animations & Interactions
1

Hello!

I’m working on getting multiple popups on a single page, but when I do, the hidden initial state does not work properly. Once I close the popup out, then everything work great.

The same interaction/animation is working properly on other site pages, but on my Precision Oncology page (where I have 2 popups) it does not work. They do have different class names.

Anyone had success fixing this issue?

Thanks in advance!

https://preview.webflow.com/preview/exs-annual-report-2019?utm_medium=preview_link&utm_source=dashboard&utm_content=exs-annual-report-2019&preview=af9ccb49f1758f8678aa41d9b13569a6&mode=preview

https://exs-annual-report-2019.webflow.io/precision-oncology

2

Hi Emily! nice to have you back :slight_smile:

Why not have both these popups hidden in the first place? (apply display:none before you publish)

3

Thanks for the quick reply! @avivtech

Yes, that’s definitely working better. The problem I then have is that one of my popup animations jumps instead of following my animation settings when I click on it the first time - clicking the second, third time, etc works great. Any idea why?

4

That might happen because you have 2 click interactions on the same element

2020-06-02_20-58-26
2020-06-02_20-58-262118×1126 185 KB

5

Hmm… one of those click Interactions is to popup the black opacity background and the other is the white box with information. This is the same way I have it set on all other site popups. I can’t figure out why it would be different here.

6

There might be a conflict somewhere, only on this specific element.
It should be one interaction that opens all elements in one click.

7

I tried combining the click interactions into one and the same “jump” persists.

8

The Modal elements have full opacity to start with, and no rotation. They only get these properties once you play the closing interaction. Add these as initial state.

9

@avivtech While I still have not been able to figure that out, I wonder if I could ask you another question -

I have the exact same interactions and settings on Jake Orville https://exs-annual-report-2019.webflow.io/pipeline and Torston Hoof https://exs-annual-report-2019.webflow.io/international (as well as several other pages), but it’s not working on Jake Orville/Pipeline page. Can you see any reason? I’m driving myself silly trying to figure out what’s different between the two of them.

10

umm not exactly.
The “problematic” one is the “oncotypeDX” and you have interaction on it only in “Precision Oncology” page

11

I’m confused on how that one relates to the one that isn’t working. I now have changed the problematic one on the Precision Oncology page and I’ve triple-checked the one on the Pipeline page, but the interation still does not trigger the Jake Orville popup.