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/
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
hi @James_Foreman there is an easy fix in video are steps you should do to make it work.
Thank you Cat & Stan, the combination of both your solutions gave me exactly what I was after. You guys rock!
Hi guys, thanks for the solution, Cat & stan, it cleared my doubt.
but i want to replace the white color with another image and do this style, is it possible, let me know please…thanks in advance
You can do something like this. It doesn’t have all of the interaction steps you might need but should cover a simple way to achieve without using filters.
https://enlarge-the-logo.webflow.io/
Hello Cat,
I’m looking for the exact same effect as @James_Foreman (also viewed on Accenture) but unfortunately your preview page isn’t working anymore.
Any chance you can share it again ?
I feel i’m stuck at “set that div transparency to screen” but not sure though.
Thank you in advance for your help.
Best regards