Text background clip and ix not working

Design help Animations & Interactions
1

Hi there

Do interactions no work if there is custom page code? I was toying with clipping methods posted by @vincent and others.

Interaction applied to the text inside the clipped class do not work for me.

Here is my public share link: [LINK][1]
https://preview.webflow.com/preview/test-tex-animate?preview=e375697a2b43944db78baf29550af082

2

If your custom code has errors it will break your site.

If your custom code conflicts with the interactions it will break the interactions.

3

Thanks @samliew.

I am putting this in the head of each page. It doesn’t work on mobile and adding an interaction to the the text inside the clipped class break the page. Beyond my current skill set. Back to SVG!

<style>

.clipped {
	       -webkit-text-fill-color: transparent;
	       -webkit-background-clip: text;
     }

</style>
4

Hi again. Does red background in the custom code mean an error. ie “text-fill-color” is in red. Thanks again

5

  1. use the custom code widget instead of the custom code zones, so that you have the result right in the designer
    http://vincent.polenordstudio.fr/snap/dco4v.mp4

  2. dont mind about the code in red in the custom code box, means nothing, it’s buggy

  3. don’t apply an interaction on an element that has clipping or masking on it. In fact don’t do nothing with an element that has masking or clipping on it. Instead, nest this element inside of another div and put your interactions on that div. Also keep in mind that masking or clipping makes an element and all its child elements rendered on a plane, so there is no 3D possible within a clipping group for example.

6

Thank you Vincent. You have converted a wasted morning into a much better outcome. That all works well.

7

Makes my day too :D

8

Vincent. As a matter of interest, I have added an animation to the embed element as I assume that I can not use native ix2 to animate the background because it is “clipped” to the text?? refer to original shared project.

9

The embed element is just a DIV.
Never put any CSS property or interaction on Clipped elements, or elements effected by custom code. Alway wrap them in a div an give this div the interactions etc…
And for clarity, don’t do it on the Embed elemeent too. wrap it in an extra div and affect that div.

Nesting is not bad, at all. Nest and nest and nest, don’t put too much properties on the same level. Yu can have one fiv for outer bounds, one for layout, one for dimension, one for interaction, one for content, one for content layout, etc etc etc… a simple card could be one div but if you add clipping and interaction, it’s not bad to use a series of nested div. Will be easier to handle and bug less, and better for cross browsers compatibility.