Streaming live at 10am (PST)

Navbar moves Site Content

hi,

have anyone an idea how i can set an interaction which open with a click on a button a subnavigation that moves down the rest of my content below. like the follow link:

http://www.mz.gov.pl/aktualnosci

Thanks
Toby

The principle is that:

Design your page with your menu open. So navbar, then submenu, then content. Be sure that your submenu section or container is overflow:hidden.

Now give this submenu the property height:0. You now just have to create a click interaction that will affect another element (the submenu) and give it height:auto… it should now unfold on click pushing down away the page content.

Hey Vincenct.

you are my man. :slight_smile: Thanks very much. I found the webflow tut, but i didn’t saw that they set the element to overflow hidden. One click changes all. :wink:

Thanks
Toby

Yep I mentionned it because I remember running into it when I first tried. And a lot of people come here asking for exactly that (:

Little tip: for the unfolding of your menu, try to use ease-out-cubic, I find that it’s the best easing method for unfolding anims… it ‘snaps’ nicely.

hi vincent,

ok. thank i’ll try the ease-out-cubic effect. :wink:

have you tried to work with mask effects in webflow?
i just try to mask an circle over an image.
the image should displayed in the mask ( circle )

Make a div, give it overflow hidden and radius 50% for all corner, you get a circle. Declare a bakground to it (:

hi,

thanks for your feedback.
how can i mask a div?

I wroter “Make” as drag a new div into the designer (:

Ah. OK. :slight_smile: OK i have a circle and a background image, but no mask. :frowning:

i want animate the circle perhaps from start point A to start point B.
And when its animate you’ll see parts of the masked background image.

give the div overflow : hidden property

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link

can i reach you directly to a mail address?

oh if you don’t want the url to be public, click on my avatar here an PM it to me, but I’ll answer here afterwards so the thread can help others.

Well here is what I was talking about:

https://v.usetapes.com/c7F8EOhoz8

Now I understand that you want to move the disc and the image remains fixed. can you tell me everything about the motion you want to end up with?

hi,

i think about such a effect. its mad in photoshop. :wink:

Haha you’re using Tapes like mé :wink: be aware that it records your sound too, I could hear the ambiance. You can Mute it in the menu.

Ok so you want to spot to follow your cursor?

I’m going to summon @bartekkustra because I feel this would be far easier to put in place with JS. ninja, what’s your opinion?

yeah. can you hear the music :smile:

it can be a cursor follow or the easy way only a circle masked button that i can give an interaction. uffz…

Hello @vincent :) Cześć @Toby :)

That’s some serious interaction you want to have but I think it’s doable. I’m thinking of having 2 background images. One will be the image you have in the background and the second one could be the SVG with a plain-white box and a circle inside.

Now the tricky part comes. A JavaScript code that will find where the cursor points to and move the background SVG image to proper position.

It might take a longer “while” to create such script. but should do the trick.

Why do you need such thing?

Now when I think about it you could use clipping and masking technique of css…