Using CSS blend modes and animations

Design help Animations & Interactions
1

Hi! I’m trying to achieve a difference effect between a text and a moving rectangle. The rectangle is suppose to move and change the text color from white to black. I’m currently using the follow snippet on the Head of the page

<style>
  .black {
    mix-blend-mode: difference;
  }
</style>

I’m unable to create such effect because I need this rectangle to move or shrink but it contains the text and it inherit this behavior.

For more clarification, this is a print screen of the desired outcome

Figma_7jzyyWVXtw
Figma_7jzyyWVXtw1866×455 3.66 KB

It should being as a white text on a black background and when the black rectangle shrinks, it reveals a black text at the exame same spot.

Because how I’m currently implementing this on Webflow, the text is a children of a div filled with black. If I resize this div or move it, the text moves as well.

Is is possible to create this effect? I’m open to other solutions that don’t involve blend modes.

Thanks in advance.

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

2

hi @Luciano_Infanti if you want to deep dive into this topic I have found this article very interesting. Hopefully you will get better understanding how things works and its limitations. :slight_smile:

1 Like