Streaming live at 10am (PST)

How is this logo effect created?

#1

Hi! I am trying (willing) to replicate the effect of the logo on this website http://ouiwill.com When you scroll you will see that the logo seems to blend with the background in the opposite way. If the background is white it will show, black, if it is pink, it shows blue or something like that.

Anyone has any clue how something like that can be done (even with code)
Thanks!

#2

Hi yakito,

Without code you can achieve this effect animating text color in a scroll animation.
With code you may one to look for css blend-mode I guess.

1 Like
#3

Thanks a lot! Will definitely take a look at blend-mode, I was not aware it even existed! :shushing_face:

#4

After inspection, they use the “mix-blend-mode:difference”

1 Like
#5

Oh I see! I was looking for the style inside the svg and couldn’t find any clue. It looks like the added it to the <button> tag instead. Thanks a million!