Why Won't 'Overflow' + 'Hidden' Not Hide Embed Animation?

Design help Custom code
1

With help of another community member I created a header that has a custom embed with html that creates a gradient of animated colors.

I set the parent div (section_home-header) to ‘Overflow’ + ‘Hidden’.

I expected the result to be that the div would clip the embed animation. Instead, the animation runs the full length of the page, disregarding the bounds of the div.

Something simple I am missing or there must be a concept around embeds where they do not follow the same properties as graphics.

What is the general approach to hide embed animation🤔?

Thanks for everyone’s help on this!

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

[1]: [http://]Webflow - Copy of Client-First 2)
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

2

Hi @tommyello :wave:
Try to set ‘Position’ + ‘Relative’ for section_home-header element
and
‘Position’ + ‘Absolute’ for HTML Embed element

3

Hi @bro-design - thanks for your suggestion :raised_hands:. I’ve tried this now and animation still seems to play across entire page. A curious thing right? I’m not a dev so I always assume a stupid mistake on my part :face_with_hand_over_mouth:

4

Oh, sorry at the first time I think that issue is that gradient section overlap your other sections.

The easiest way to solve issue gradient appearing on other sections — just set background to this sections🙂

5

Thank you @bro-design that is a simple and straight forward approach :raised_hands:

1 Like