How to zoom image mask?

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/

2 Likes

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!

Hey all, (translation, Hi Cat!).

So I’ve had a play with this. Cat, your solution was great but raises an issue, scaling the SVG causes pixelation. As I understand it, this is because the nature of scale transforms the screen rendered svg - as if it were a jpg or png.

The best approach seems to be to use the “size” option to effectively scale the svg itself. Doing this solves all pixelation issues however it introduces a new problem: the scaled svg adheres / aligns to the left margin.

Hoping someone can suggest a way to overcome this so that the svg remains centred throughout the size up interaction.

Any help appreciated!!!

My current set up can be seen HERE

1 Like

hi @James_Foreman there is an easy fix in video are steps you should do to make it work.

2 Likes

Thank you Cat & Stan, the combination of both your solutions gave me exactly what I was after. You guys rock!

2 Likes