Interactions 2.0 issues when working in symbols

[Okidoki (Victor)]

Hey @Brando,

Wow super nice! Thanks so much, indeed, working on the I.X 2 is muuuch smoother.
I haven’t re-touch all of them, but especially this logo interaction I did some little extra.

That’s amazing.

Although, I still have some questions or remarks, it would be amazing to have your opinion on them.

1 Page Crop
If you look at my website on Chrome (or on another browser) and check it in the inspector in 4K, you will notice that my website page height are totally different. I had to add pixels in order for my section not to collapse, on my home page and Personnal Projects page.

The page height is rather long, in between 10 000px and 12 000px, I did that because, for example on Firefox and Edge, my website will just be crop, and content will be invisible.
But on the Designer Panel there is no mean to know if such thing will happen.

Am I doing something wrong?
Is a more stable/secure way to fixed a page height so that it wont be cropped?

2 Mobile Ghost margin
If you open this page, Projets Personnels, and look at it on Mobile view, on Chrome, you will see that there is an empty space on the right of the website, that totaly disrupt my layout. It may come from the animations, or interactions, but I think check the Overflow Hidden for the element.
Shall the Overflow be checked on the element that causing the issue, or on the main parent is enough?
Is there a way to prevent that from happening within the designer, to get a warning?

3 Bug report
Since the Interaction update got implemented (thanks so much for this, now Symbols do not loose their linking when copy pasting… it saved me hours of work), I noticed that updating symbols that has an IX 2.0 in it, may cause webflow to freeze.
But not the freeze of the whole, just the interaction preview is off, I cannot use Toggle Preview, and cannot scroll the page, but I can click on the pannels and settings are usual.
My work around was to go on the Dashboard and come back.

4 Slider images size goes wrong
Sometime, and this happens totally random, the images in my slider turns super small, and it does it until I refresh / republish the website. Even if I do not work on the images within the slider, it can do it out of nowhere, and there is no way I forsee when it will happen.
Is this because I have used % to size my images in the slider?
I suspect this to be linked with page height and the different breakpoints…

5 Images appears even it was set to opacity 0%
I have on my pages a dropdown page that can be activated by clicking «À propos», eventhough I turned it to 0% opacity in its initial state, when the pages load it still show up for a second on the page (it is set to Auto- Full). My work around was to add to it a 0% opacity initial state with a Legacy Interaction.
But this seems to be sketchy… Is this normal? Is this linked to scrips loading one after another?

Thanks again for all your help and the team Brando you are doing an amazing job with Webflow.

Okidoki

[Okidoki (Victor)]

Hey Brando,

Coming back for a short info about a bug that occurs once in a while.

Webflow turns like this:

It happened when I moved some symbols in/out a page, and did Ctrl+Z to undo what I did, instead of deleting the Symbol. The symbols were link with interactions 2.0.

I did a screenshot of the console, but it is a long and heavy png… 8.84Mo.
Would that be better to send it to you via email? So you can show it to the team?

Thanks!
Okidoki

[Okidoki (Victor)]

1 Page crop < Problem solved
I had a div, used as a wrapper for the whole page that caused the height issue.
So for now this problem has been understood and corrected.

@Okidoki

1 Page Crop

If you look at my website on Chrome (or on another browser) and check it in the inspector in 4K, you will notice that my website page height are totally different. I had to add pixels in order for my section not to collapse, on my home page and Personnal Projects page.

The page height is rather long, in between 10 000px and 12 000px, I did that because, for example on Firefox and Edge, my website will just be crop, and content will be invisible.

But on the Designer Panel there is no mean to know if such thing will happen.

Am I doing something wrong?

Is a more stable/secure way to fixed a page height so that it wont be cropped?

2. Mobile Ghost Margin < Problem solved.
This seems to happen whenever an object exceed the lenght of any container, so indeed Overflow on the right element is the solution.

@Okidoki

2 Mobile Ghost margin

If you open this page, Projets Personnels, and look at it on Mobile view, on Chrome, you will see that there is an empty space on the right of the website, that totaly disrupt my layout. It may come from the animations, or interactions, but I think check the Overflow Hidden for the element.

Shall the Overflow be checked on the element that causing the issue, or on the main parent is enough?

Is there a way to prevent that from happening within the designer, to get a warning?

[Brando (Brandon Roche)]

@Okidoki

Thanks for letting me know number 1 and 2 have been fixed.

We are currently working on a fix for #3.

For #4 — yes if you are only using % across all elements in a section there’s a chance this could be causing the issue. I recommend ensuring at least one parent element has a set height/width such as 100vh/vw or be sure to set all height/width to auto and allow the content to set the dimensions. It’s tough to say the exact issue without knowing the page/element. As this seems like a unique issue can you please fill out a bug report here if the issue persists: https://university.webflow.com/contact

For #5 This is odd for sure. Can you please submit a bug report via the above contact form?

Regarding the symbol/interaction issue where the Designer turns grey and freezes — can you please provide more information on this? I tried to reproduce the issue but was unable to do so. If you can share that image via google drive link, dropbox link, or cloudapp link that would be ideal!

​Thanks in advance, and I’m standing by for your reply.

Kind Regards,

Brandon

[Brando (Brandon Roche)]

@Okidoki

We pushed a fix for the issue you described in #3. The Designer should no longer freeze / stop scrolling when toggling preview.

[Okidoki (Victor)]

Hey Brando,

Thanks so much! All of your advices and help have been amazing for me.
Special mention for #4 it really helped me understand how to sized things properly in between screen resolution and break points.

And my website overall is much smoother to work on since thoses fixies.

So for now, let’s consider this topic solved and closed.

Thanks so much!

[hirastudio (Nicolas Hirajeta)]

I also seem to be having an issue. When setting up a simple Mouse Clip (Tap) Trigger. The elements that are affected move/rotate on animation and all the previews look fine. But when I go into preview mode to test it or publish to staging site the initial load of the elements are already in their animated state. The first click does nothing (appears) which should trigger their animation (which they’re already at). The second click goes back to initial and will loop per click animation like it’s supposed to.

So the issue is when the page loads?

P.S. - I hope this is the right place for this reply!

[Brando (Brandon Roche)]

Hi @hirastudio

Thanks for replying here. This sounds like it may be related, but could also be a separate issue.

Can you please create a new thread under the interactions category?

Can you also please include your Read-Only link, screenshots and any other relevant info?

Thanks a ton!