Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Martyn

How to achieve this awesome transitions with a different logo?

Recommended Posts

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

 

 1559479141_Logotipo-BlackBG-BUENDIAGUITARS.thumb.jpg.bbf42f90750050b531600e6b1fda0b8f.jpg

Share this post


Link to post
Share on other sites

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 :) 

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×