Menu Animation - BG Issue

Design help Animations & Interactions
1

Hi everyone!

I’m struggling create something that seemed simple at the first look. Trying to create the animation below for a client:

https://streamable.com/11spq7

The thing is that the origin point of the expanding BG circle is the same as the hamburger icon - that’s positioned absolute to the container. But the circle itself (the yellow div I’m testing) is position:absolute to the Body.

https://streamable.com/amalbf

That means the circle will have a different origin point depending on the browser size. Is that a way to avoid that and make it fixed?

Here is my public share link: LINK
(how to access public share link)

Thank you so much!

2

I’m not seeing the expanding circle element on your project, did you happen to remove it after creating the post?

3

Hi @mikeyevin,

Thanks for the reply. I’m working on the project now trying another workaround for it… any ideas?

4

I don’t think you’ll have an issue with your original idea, however without seeing how you’ve got it setup I can’t say for sure.

As long as your element has a parent that’s position: relative and it’s set to position: absolute it should be basing its position off the parent—regardless of what Webflow shows in the Designer. I feel like I occasionally see it incorrectly show that it’s basing its position off the body when it’s not :man_shrugging:

1 Like
5

Hey @mikeyevin, you’re right.

I tried to use position:absolute on the circle background DIV inside the container and it worked. For the purpose of the animation the DIV considered the whole body and not only the container.

https://streamable.com/ggm74n

1 Like
6

Now what is happening is that it works great in the preview, but not in the published website: https://lemon-rebrand.webflow.io/

7

UPDATE: It actually worked! But I was so happy that I forgot to thy the published website and the craziest thing is happening:

https://streamable.com/y5p6j2

The menu works perfectly in the preview and Responsive Viewer but not on normal Chrome or Safari. Any ideas?