Webflow Jedi, I have a challenge for you

Welcome Webflow Jedi,

I am looking for an elegant solution to create a logo that scales on scroll to reveal a static full screen image. Ideally the logo would be an svg mask.

Confused? Don’t be. The effect I’m after can be seen when you scroll THIS PAGE

Try you must.

Bonus points if you can achieve this without custom code.


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

Hi James!
The only way I found to do this without any code at all is with the mask div transparency set to screen. Very fast and super easy way to achieve the effect.
http://catherines-top-notch-site-82d539.webflow.io/

1 Like

Hi Cat!

Thanks for your reply, I was beginning to think I was all alone here!

Your example looks be exactly what I’m trying to achieve, you rock. I’m still pretty new to Webflow, would you be nice enough to send me a read only link so that I can poke around see exactly how you set this up?

Here you go. Ha ha. I feel like this is cheating because its too easy
Fill a div with the background image. Put another div in it with a white background. Put a black and white svg image you choose for the mask. and set that div transparency to screen. Then add the scroll animation to the svg image.
https://preview.webflow.com/preview/catherines-top-notch-site-82d539?utm_medium=preview_link&utm_source=designer&utm_content=catherines-top-notch-site-82d539&preview=b56c5df071c24c8ea50b8ae9b6c67dd0&workflow=preview

This is too elegant! Damn, now I feel dumb! I’ll have to have a play with this tomorrow and see if I can get it to work as a section rather than the whole page.

You’re my new favourite forum person Cat, thank you!

ps. You’re also the only person I have met on the forum.

You are very welcome!