How to use different background colors in mixed blend mode multiply to achieve knockout text effect successfully

[MexicoNewZealand]

Hi! 

 

I have a quick question for a small project I am building and that has some GSAP animations. The knockout text effect created in the code pen above uses mixed blend mode: multiply to achieve the desired knockout effect. For this to work, the parent div (.text) needs to have a background color of black and the actual text needs to have a color of white to create the knockout effect. I am looking to implement a yellow background color but mixed blend mode multiply requires black and white to work; are there any solution to achieve my goal of having a yellow background color? All help will be greatly appreciated!

See the Pen eYMjLxP by justjoinednow (@justjoinednow) on CodePen.

[GreenSock]

It sounds like you need masking or clipping, not a mix-blend-mode. 

[MexicoNewZealand]

12 hours ago, GreenSock said:

It sounds like you need masking or clipping, not a mix-blend-mode. 

out of curiosity how would i go about achieving this?

[Carl]

start here.

 

https://mgearon.com/css/css-background-clip-text/

 

here is a stripped down demo i had showing the text shrink

 

See the Pen NWMqzGW by snorkltv (@snorkltv) on CodePen.

 

google "css clip mask text" for more.  not really sure how to handle video. you may have to use canvas.