Problem with interactions (open/cose modal glitch)

Design help General
1

I am having a problem with this interaction. I am trying to open and close the modal using opacity and slide to the left. It seems very glitchy and for some reason it doesn’t behave the way I want.

can someone help me with that?

this is the read only link:

https://preview.webflow.com/preview/giuseppe-bufalo?utm_medium=preview_link&utm_source=dashboard&utm_content=giuseppe-bufalo&preview=64ff8d5281ca290b7234af9736a12bec&mode=preview

Thank you for the support!

G.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You’re using initial state on both your open and close interaction. So they kind of fight to be THE initial one. Don’t use initial state in your close IX: you know what the state is, as the open IX just ran. Just proceed with the closing anims and make sure you end up with the modal opacity:0 and moved to the right.

3

Hi Vincent,

Thank you for your help. I tried to do what you said but it’s not working. It’s not going back to the initial state. it is very glitchy and I can’t figure out what’s wrong. I thought the problem was related to the positions of the div-bocks (relative/absolute) and the animation un the X axis, it was in percentage before so I change it in pixels but nothing changed.

Do you think you can quickly show me how to solve it by taking some screenshots?

I’d really appreciate it!

Thank you.
G

4

Also I just noticed when I display the website in different modes (desktop, tablet and phone) on my computer everything works, but when I try it on my iPad the scroll go crazy and the hero divblock doesn’t fit the hight of the screen, resulting in a sort of double scroll.

anyone knows why is this happening?

Thank you,
G

5

Anyone ?

I see bugs and glitch everywhere. Is anyone able to help me to figure out what’s happening with the interactions?

Even when I press buttons that are not related to the modal the modal appear and disappear.

I also made a “Test” page where I made a new modal from scratch following the tutorial and I m having the same problems.

is this a bug of the new version of Webflow?

6

Hi @Giuseppe, on which page do you have the modals running on?

How many different modals do you have?

Are you wanting the modals to have a slide-in feature like the menu itself?

Also, why are you using grid? Any particular direction for this?

Thanks!

7
  • the modals are in every project (images) so when you click on the image the modal appears and shows the project.

all the modals are there and also all the contents. I just need to make the animation work properly.

  • only one modal (it’s called open modal, close modal in the interaction panel)

  • yes I want the “modal wrapper” to fade in and the “modal” to slide in.

  • the reason I’m using the grid is to have the menu on the left side and the contents on the right, people always say use the grid so I used it.

I also I have attached a screenshot…for some weird reason when I click the Botton view the modal start to disappear and appear.

39
392844×1596 421 KB

8

Ok. Thanks for explaining. I’m out of office now but when i get back I’ll take a look and see what can be figured out, unless someone else beats me to it!

9

Thank you I really appreciate it!

10

By the way I noticed the glitches are there even if I just use opacity fade in/out in the interaction.

So it’s not related to the movement. In the second part of the interaction the modal disappear without showing the fading out of the opacity.

Can this be related to a bug in the new version of Webflow? I don’t remember this happening before.

11

Good morning @Giuseppe, thanks for the additional info. I will take a look and get back to you.