Streaming live at 10am (PST)

Interaction (Initial State NOT VISIBLE) SHOWING in the Designer

#1

Hi,

Is it possible to hide the elements that I have set to show via an interaction?

I have an interaction that is purely for mobile devices. i.e It’s my mobile navigation.

The interaction’s very first step in the sequence is set to initial state (not visible in the viewport), yet in my designer it is visible.

Am I missing something or can I not hide any of the elements that are set to be revealed after clicking a button in the designer?

Thanks!


Here is my public share link: https://preview.webflow.com/preview/signspublishing?utm_source=signspublishing&preview=b5e0fadfdd81ae6f1e97382af136daa3

#2

Hello @Kalan,

What are you trying to target on your current site?

#3

Hi @Austin,

As you can probably see this is what my Mobile breakpoint looks like.

This is what the initial state of my interaction looks like.

Is there a way of hiding the elements that are set to show once my Menu Icon has been clicked? I can’t imagine complex sites with various elements hiding and showing would all be showing every single element at once, although now that I have said that there may be no way of showing it to change the design so this could be why it always shows.

#4

Hey @Kalan,

That’s totally doable! You can absolutely do what you are talking about. You can set the object to be Display: None in the designer remove the first Hide/Show step for the interaction and it will work properly :slight_smile:

I recorded the video below to show you the steps I took. Sorry no audio on it I was in a crowded room. But I hope it helps :slight_smile:

Walkthrough Video

Let me know if that helps!
–Austin

1 Like
#5

Hi @Austin,

Thank-you so much!

So… what I’ve learned is that even though an element’s display properties is set as: None an Interaction will still override the setting. Good to know.

Since you were able to solve this problem I have another question that relates to the same Element/Interaction.

The navigation I have created for Mobile is purely a re-skin of what is used for the desktop site, in fact it’s hardly a re-skin because it’s fairly basic. But it is different.

As you know the mobile navigation is hidden on desktop and the desktop navigation is hidden from the Tablet breakpoint and below.

My question/observation is that when I use the site on desktop and reduce my window width to go into tablet view and I enable the navigation if I were to leave it enabled and expand my window again the mobile navigation (that should NEVER be visible on desktop) is now visible. How can I allow the elements inside the Mobile Navigation to NEVER show on desktop even though the wrapper display settings is set as: None.

I realise that the end user will probably never expand their window once they have opened the menu but I don’t want the opportunity to arise were the website shows a visible problem like this, it’s just messy.

Thanks heaps, I look forward to hearing your response. :slight_smile:

#6

Hello @Kalan,

I think I solved it! Check out the attached video. So basically your mobile nav links are still showing because they are set as inline block. Set them to display none on Desktop and then put them back to Inline Block on Tablet, Mobile - Landscape, Mobile - Portrait.

Walkthrough Video

Hopefully the makes sense & solves your issue on the published site.

–Austin

1 Like
#7

@Kalan if that doesn’t solve it… Let me know and I can dig a little further.

#8

Thanks for recording the videos, they’re really helpful.

It’s now solved. One problem though, which I did fix myself thankfully…

I changed the display options of the wrapper though the invisible space was still somehow being taken into account and it moved the desktop navigation and logo to the left (as shown at the end of your video). I tried hiding the text inside the wrapper but it resulted in the same thing.

In order to get rid of any position override I set the desktop element to fixed, and because it’s invisible it doesn’t matter.

I appreciate the effort and thought you’ve put into solving the problems!

Seeing as you already have the link to the site do you see any reason why the transition doesn’t play more than once on the live site? The second time and every one following is a hard cut.

I’ve also experienced with the ‘click for more’ interaction that it doesn’t reset and play/move again if it hasn’t finished it’s 2nd animation sequence, and rather moving it x amount of px it hard cuts to the 0px state (the same as no hover at all).

Cheers!

#9

@Kalan hmmm… not sure. It may be something with the Hide/Show actions. Because they can’t have a duration/easing added to them in your current interaction. Maybe try using opacity and then once moved back hide it. I know it’s an extra step.