How to achieve this awesome transitions with a different logo?

[Martyn]

Hi all-

 

When this site first loads, and also when you click the menu button, there is a beautiful transition with their logo in black and white.

How can achieve this effect with a different logo that's shaped like a triangle  of 3 sections (image below)?

 

Reference website:

https://www.cahnwilson.com/

 

Thank,

- Martyn

 

 

[ZachSaucier]

Hello Martyn and welcome to the GreenSock forums!

 

On 2/23/2020 at 5:24 AM, Martyn said:

When this site first loads, and also when you click the menu button, there is a beautiful transition with their logo in black and white.

How can achieve this effect

If you use your developer tools, you can see that the title is in Canvas. So the lines and such are also in canvas. They probably use a mix blend mode to do the effect of part of the text and part of it being white, but you could also do it through clip paths and layering  or masks if you wanted to use those instead.

 

Unfortunately we don't have the capacity to do it all for you, but if you have specific questions, especially related to GSAP, we're happy to help where we can  

[Martyn]

Thank you for pointing me in the right direction Zach.

I'll investigate clip paths, layering and masks and get back with more specific questions